| 18.02.2016
CSS3 нь UI дизайнеруудад хязгааргүй боломжуудыг нээж өгдөг бөгөөд хамгийн гол давуу тал нь бараг ямар ч санааг JavaScript ашиглахгүйгээр бодит амьдрал дээр хялбархан хэрэгжүүлж, хэрэгжүүлэх боломжтой юм.
Энгийн үгс хэрхэн нүүр хуудсыг амилуулж, хэрэглэгчдэд ашиглах боломжтой болгож чадах нь гайхалтай. Жишээ нь курсорыг түүн дээр аваачих үед элементийг хэрхэн хувиргах, хэв маягаа өөрчлөхийг зөвшөөрөх талаар мэдэхийн тулд CSS3 руу очно уу. Доор байгаа есөн CSS3 анимейшн програмууд нь сайт дээр дур булаам уур амьсгалыг бий болгохоос гадна үзэсгэлэнтэй жигд шилжилтүүдээр вэбсайтын хөгжилтэй дүр төрхийг сайжруулахад туслах болно.
Дэлгэрэнгүй мэдээллийг та файлын архиваас татаж авах боломжтой.
Бүх эффектүүд нь эрчим хүчний шилжилтийн тусламжтайгаар ажилладаг. шилжилт- "Шилжилт", "дахин бүтээх") ба псевдо анги: хулганыг шинэ курсор дээр байрлуулах үед элементийн хэв маягийг заадаг хулгана (манай туслах дээр). Бидний хэрэглээний хувьд бид 500x309 пикселийн хэмжээтэй div блок ашигласан, гаралтын дэвсгэр өнгө нь #6d6d6d, нэг шатнаас нөгөөд шилжихэд 0.3 секунд зарцуулсан.
Их бие > div (өргөн: 500px; өндөр: 309px; дэвсгэр: #6d6d6d; -webkit-шилжилт: бүх 0.3 сек хялбар;; -moz-шилжилт: бүх 0.3 сек хялбар; -o-шилжилт: бүх 0.3 сек хялбар; шилжилт : бүх 0.3 секунд хялбар)
1. Курсорыг дарж өнгийг өөрчил
Хэрэв ийм үр нөлөөг хэрэгжүүлэхийн тулд дууны RGB утгын математик тооцоололтой маш их ажиллах шаардлагатай болно. Одоо та сонгогч дээр псевдо анги нэмэх шаардлагатай CSS хэв маягийг бичих хэрэгтэй: курсорыг курсор дээр аваачихад гаралтын өнгийг арын дэвсгэрээр жигд (0.3 секундын дотор) солих дэвсгэр өнгийг тохируулах хэрэгтэй. блок:
Өнгө: гүйлгэх (арын дэвсгэр:#53ea93; )
2. Хүрээний харагдах байдал
Хамгийн тод өөрчлөлт бол хулганыг гүйлгэхэд жигд харагдах дотоод хүрээ юм. Янз бүрийн товчлууруудыг илүү тохь тухтай болгоход тохиромжтой. Энэ үр дүнд хүрэхийн тулд дараах псевдо ангиллыг ашиглана уу: hover ба хайрцагны сүүдрийн хүчийг оруулах параметртэй (элементийн дундах сүүдрийг тохируулна). Нэмж дурдахад та сүүдэрт (бидний сүүдэрт 23px) ижил өнгөтэй болгох хэрэгтэй.
Хил: хулганаа аваач (хайрцаг-сүүдэр: оруулах 0 0 0 23px #53ea93; )
3. Савлуур
Шилжилтийн хүчийг энд ашигладаггүй тул CSS хөдөлгөөнт дүрсийг буруутгаж байна. Үүний оронд бидний сэтгэлийг хөдөлгөсөн:
- @keyframes - хүрээ тус бүрээр нь CSS хөдөлгөөнт дүрс үүсгэх үндсэн заавар бөгөөд энэ нь танд ажиллах боломжийг олгодог. үндсэн цэгүүдийн жагсаалт бүхий анимейшныг дүрслэх, дүрслэх;
- хөдөлгөөнт дүрс ба хөдөлгөөнт-давталт-тоолол - хөдөлгөөнт дүрс (амтлаг байдал, уян хатан байдал) болон мөчлөгийн тоог (давталт) тохируулах хүч. Заримдаа давтана 1.
4. Згасання
Гөлгөр устах нөлөө нь үндсэндээ элементийн тунгалаг байдлын хэвийн өөрчлөлт юм. Хөдөлгөөнт дүрсийг хоёр үе шаттайгаар бүтээдэг: харагдах байдлын 1-р түвшний кобыг тохируулах шаардлагатай - дараа нь харагдах байдал байхгүй болно, дараа нь хулганыг зөөвөрлөх үед эдгээр утгыг оруулна уу - 0.6:
Бүдгэрэх ( тунгалаг байдал: 1; ) . бүдгэрэх: холбох ( тунгалаг байдал: 0.6; )
Хамгийн сайн үр дүнд хүрэхийн тулд утгыг дараах газруудад өөрчил:
5. Збилшеня
Курсорыг зөөвөрлөхөд блокыг томруулахын тулд бид хурдан хувиргалтыг ашиглан утгыг scale(1.2) болгож тохируулна. Энэ тохиолдолд блок нь пропорцоо хадгалах замаар 20 зуугаар нэмэгдэх болно.
Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )
6. Өөрчлөх
Элементийг өөрчлөх нь томруулахтай адил энгийн зүйл юм. Тав дахь догол мөрөнд хуваарийг нэмэгдүүлэхийн тулд бид 1-ээс их утгыг оруулах шаардлагатай байсан тул блокыг өөрчлөхийн тулд бид зүгээр л нэгээс бага утгыг оруулна, жишээ нь масштаб(0.7). Одоо хулгана дээр хулганыг аваачихад блок нь пропорциональ хэмжээгээрээ 30 зуугаар өөрчлөгдөнө.
Ачаалах: хулганаа аваач ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )
7. Өнгөний хувирал
Хамгийн алдартай хөдөлгөөнт дүрсүүдийн нэг бол курсорыг чиглүүлэх үед тойрог болж хувирдаг шулуун шугамын элемент юм. CSS border-radius, vikorista-ийн нэмэлт хүчин чадлын хувьд: hover болон шилжилтийн хувьд үүнийг асуудалгүйгээр хэрэгжүүлэх боломжтой:
Тойрог: гүйлгэх (хязгаарлалтын радиус: 70%; )
8. Обертання
Хөдөлгөөнт дүрсний практик хувилбар нь элементийг хэдэн градусаар эргүүлэх явдал юм. Үүний тулд бид дахин хувиргах хүч хэрэгтэй ба бусад утгуудтай - rotateZ(20deg). Эдгээр параметрүүдийн тусламжтайгаар блокыг Z тэнхлэгийн дагуу жилийн сумны ард 20 градус эргүүлнэ.
Rotate:hover ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); )
9. 3D сүүдэр
Загвар зохион бүтээгчдийн санаанууд нь хавтгай дизайны яг үр нөлөөгөөр ялгаатай байдаг. Энэ CSS3 хөдөлгөөнт дүрс нь маш анхны бөгөөд вэб хуудсууд дээр бас алдартай. Хайрцаг-сүүдрийн аль хэдийн танил болсон хүчийг ашиглан өчүүхэн үр дүнд хүрч (баян сүүдэр үүсгэх) ба translateX(-7px) параметрээр хувиргах (блокыг хэвтээ байдлаар зүүн тийш 7 пикселээр зөөх эсэхийг баталгаажуулах):
Threed:hover (хайрцаг-сүүдэр: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px - 6px transform: translateX(-7px); 7px);
Хөтөчийн дэмжлэг
Өнөөдрийн байдлаар эрчим хүчний шилжилтийг дараах хөтчүүд дэмждэг.
| Ширээний хөтчүүд | |
|---|---|
| Internet Explorer | IE 10 ба түүнээс дээш хувилбараар дэмжигдсэн |
| Chrome | 26-р хувилбараар дэмжигдсэн (25-р хувилбар хүртэл -webkit- угтвараар дэмжигддэг) |
| Firefox | 16 хувилбараар дэмжигдсэн (4-15 хувилбарууд нь -moz- угтварыг ашигладаг) |
| Дуурь | 12.1 хувилбараар дэмжигдсэн |
| Сафари | 6.1 хувилбараар дэмжигдсэн (3.1-6 хувилбарууд нь -webkit- угтварыг ашигладаг) |
Transform, box-shadow гэх мэт эдгээр програмын бусад функцууд болон хувилбаруудыг одоогийн ихэнх хөтчүүд дэмждэг. Гэсэн хэдий ч, хэрэв та эдгээр санаануудыг төсөлдөө ашиглах гэж байгаа бол хөтчөөс хөтчийн функцийг дахин шалгахыг зөвлөж байна.
Эдгээр CSS3 хөдөлгөөнт програмууд танд хэрэг болно гэдэгт бид итгэлтэй байна. Танд бүтээлч амжилт хүсье!
Hover-effects - сурах сэдвийг дуусга. Тэдгээрийн хэрэгжилт хүртэл таны сайтыг илүү динамик, амьд болгож чадна. Өнөөдөр бид зурагтай ажиллах зарим эффектийг авч үзэх болно. Тоглоомоос суралцах боломжтой HTML болон CSS кодуудад мөн адил хамаарна.
Збилшення
Эхлэхийн тулд, хэрэв хэрэглэгч курсорыг зурган дээр аваачвал зураг томрох боловч түүний хүрээн дотор алдагдсаар байх нь чухал юм.
Тэнхлэг HTML-код:
Зураг дээрх шиг 400х400 пикселийн хэмжээтэй байгааг анхаарна уу. Одоо гайхцгаая CSS.
/*GROW*/ .grow img (өндөр : 300px ; өргөн : 300px ; -webkit-шилжилт: бүх 1 секунд; -moz-шилжилт: бүх 1 секунд; -o-шилжилт: бүх 1 секунд; -ms-шилжилт: 1 секунд хялбар шилжих: бүх 1s ease ) .grow img:hover ( өргөн : 400px ; өндөр : 400px ; )
Бид эхлээд амьтны хүрээлэнгийн зургийн хэмжээг 300px болгож тохируулсан бөгөөд дараа нь хэрэглэгч түүн дээр гүйлгэн ирэхэд 400px болж нэмэгддэг. Бидэнд халих далд байдаг бөгөөд энэ нь масштабын эффектийг арилгах боломжийг олгодог.
Стиснення
Өмнө нь бид хулганы дээр курсорыг аваачихад зураг хэрхэн томордогийг гайхшруулж байсан. Эргэлтийн эффектийг харцгаая. Энэ арга нь үндсэндээ ижил бөгөөд зөвхөн энэ удаад та хэмжээсийг 400px гэж тооцож, курсорыг зөөвөрлөхдөө 300 пиксел болгож өөрчлөх хэрэгтэй.
/*SHRINK*/ .shrink img (өндөр : 400px ; өргөн : 400px ; -webkit-шилжилт: бүх 1s хялбар; -moz-шилжилт: бүх 1s хялбар; -o-шилжилт: бүх 1s хялбар; -бүх-trans 1s хялбар шилжилт: бүх 1s хялбар ) .shrink img:hover ( өргөн : 300px ; өндөр : 300px ; )
Хажуугийн панорама
Одоогийн эффектийн хувьд зургийн хэмжээ өөрчлөгдөхгүй, гэхдээ дарахад зураг холдох болно. Энэ нь объектын хүчийг бэхжүүлэх сайн арга юм.
Энд бид 600px өргөнтэй, ердөө 300px өндөртэй vikory зургийг ашигладаг - бид зургийн хэвтээ байрлалыг өөрчилдөг бөгөөд эффектийг өндөрт хөлдөөх шаардлагагүй.
/*SIDEPAN*/ .sidepan img (зүүн талын зах: 0px; -webkit-шилжилт: захын 1 секундын хялбар байдал; -moz-шилжилтийн: захын 1 секундын хялбар байдал; -o-шилжилтийн: захын 1 секундын хялбар байдал; -ms-шилжилтийн: 1 секундын хялбар байдал шилжилт: 1s-ийн хялбар байдал ) .sidepan img:hover (зүүн захын зай: -200px ; )
Эргүүлэх эффектийг бий болгохын тулд бид өнгөрсөн удаа хийсэн шиг зургийн хэмжээг өөрчлөхгүй, харин оронд нь ижил захын зайг ашиглан зургийг зүүн гараараа байрлуулна. Хэрэв та зургийг баруун гар тийш шилжүүлэхийг хүсвэл margin-right сонгоно уу.
Босоо панорама
Эффектийг рок дээр дамжуулахын тулд энэ эффектийг дахин давтъя - энэ нь босоо тэнхлэгийг бий болгоход бас тохиромжтой.
/*VERTPAN*/ .vertpan img ( margin-top : 0px ; -webkit-шилжилт: margin 1s ease; -moz-transition: margin 1s ease; -o-шилжилт: margin 1s ease; шилжилт: 1s хялбар; ) . vertpan img:hover (дээд талын захын зай: -200px; )
Код нь өмнөх үеийнхтэй бараг адилхан, зөвхөн одоо бид зүүн талын ирмэгийг margin-top гэж сольж байна.
Өөрчлөлт
Шууд үр нөлөө нь динамик юм.
Нахил
Одоо зурган дээр хулганаа аваачихад зүсэлт харагдахаар хийцгээе.
/*TILT*/ .tilt ( -webkit-шилжилт: бүгд 0 .5 сек хялбар; -moz-шилжилт: бүх 0 .5 секунд хялбар; -o-шилжилт: бүх 0 .5 секунд хялбар; -ms-шилжилт: бүгд 0 .5 секунд ese; шилжилт: бүгд 0 .5s хялбар ) . tilt :hover ( -webkit-transform: rotate(-10deg) ; -moz-transform: rotate(-10deg) ; -o-transform: rotate(-10deg) ; - ms-transform: эргүүлэх(-10deg) хувиргах: эргүүлэх(-10deg) ;
Таны харж байгаагаар бид зургийг арван градусаар эргүүлэхэд л хангалттай. Энэ нь маш үр дүнтэй юм!
Зүссэн хэсгийг дугуйлах
Дүрс рүү заахад тэр гадаснаас дөрвөлжин болж хувирч, эргэж эхэлдэг.
/*MORPH*/ .morph ( -webkit-шилжилт: бүгд 0 .5 сек хялбар; -moz-шилжилт: бүх 0 .5 секунд хялбар; -o-шилжилт: бүх 0 .5 секунд хялбар; -ms-шилжилт: бүгд 0 .5 секунд хялбар шилжих: бүх 0 .5s ease) .morph :hover ( хилийн радиус: 50 % ; -webkit-transform: эргүүлэх(360deg); -Moz-хувиргах: эргүүлэх (360 градус); -o-хувиргах: эргүүлэх (360 градус); -ms-хувиргах: эргүүлэх (360 градус); хувиргах: эргүүлэх (360 градус); )
Энд хулганы курсорыг гүйлгэхэд 360 градус эргүүлж, хилийн радиусыг аажмаар 50% болгон өөрчилсөн, дараа нь тойрог болж хувирдаг morph классыг оруулсан болно.
Төвлөр
Өөр нэг арга бол хүрээний радиусыг ашиглан зургийг дугуйруулж болно. Харин энэ удаад бид хилийн радиусыг нэмэгдүүлээд зогсохгүй, өөр зүйл хийх болно. Хүрээний хайрцгийг ашигласнаар зургийн тодорхой хэсэгт анхаарлаа төвлөрүүлэх эффект бий болно.
/*FOCUS*/ .focus ( -webkit-шилжилт: бүх 1s хялбар; -moz-шилжилт: бүх 1s хялбар; -o-шилжилт: бүх 1s хялбар; -ms-шилжилт: бүх 1s хялбар; шилжилт: бүх 1s хялбар; ) .focus:hover ( хүрээ : 70px хатуу # 000 ; хилийн радиус: 50 % ; }
Бид 10px хүрээг авч, хар хүрээг 70px-ээр сольж, радиусыг 50% хүртэл эргүүлсэн бөгөөд энэ нь бидний урд талд хийсэн зүйл юм.
Webkit шүүлтүүр
Хөтөчийг дээд зэргээр ажиллуулахын тулд ийм програмууд WebKit угтварыг ашиглахгүй. Эдгээр өгөгдлийг Safari болон Chrome-д ашиглах боломжгүй болсон. Хязгаарлалтаас үл хамааран Webkit шүүлтүүр нь гайхалтай үр дүнд хүрэхийн тулд үйлдлүүдийг өөрчлөх боломжийг танд олгоно! Демо 
Росмиття
Эхний нөлөө, бид zastosovuvatimemo нь зүгээр л rosmitya юм. Одоо та кодуудын дараагийн жижиг эгнээнд хүрч болно.
Юуны өмнө энэ сэдвээр хараахан хараахан амжаагүй эсвэл огт мэдэхгүй байгаа хүмүүст зориулж hover гэж юу болохыг товч тайлбарлая. Хулганы курсорыг ашиглан вэбсайтын элементүүдэд янз бүрийн төрлийн эффектүүдийг (гарчиг, зөвлөмж, жигд шилжилт, хувиргах, эргүүлэх, нэмэгдүүлэх, нүүлгэн шилжүүлэх гэх мэт) ашиглаж болно. Эдгээрийг янз бүрийн jQuery залгаасуудын тусламжтайгаар эсвэл цэвэр хэлбэрээр хэрэгжүүлж болно.
Өнөөдөр би javascript сангуудыг холбохгүйгээр CSS3 ашиглан бүтээсэн зургийн эх хулганын эффектүүдийн томоохон цуглуулга бэлдэж байна. Би цэвэр CSS3 дээр hover эффектийг хэрэгжүүлэх давуу болон сул талуудын талаар ярихгүй, энэ бол өөр сэдэв, зүгээр л жишээнүүдийг гайхшруулж, шаардлагатай бол өөрийн сайт дээрх ижил төстэй байдлыг шалгаарай. Бүх эффектүүдийг нэг дор үзүүлэв. Гарын авлагууд нь их бага хэмжээний хөрөнгөтний шинж чанартай боловч бүх зүйл нь зөн совингоор тодорхойлогддог.
Эдгээр бүх програмууд зөвхөн CSS3-ийн хүчийг дэмждэг одоогийн хөтчүүдэд зөв ажиллаж байгааг би хүндэтгэж байгаагаа илэрхийлмээр байна.
Эффектүүдийн нэрсийг (бүх зорилго, зорилгоор) машин орчуулгад мушгин гуйвуулахгүйгээр далд зургийг эвдэхгүйн тулд хэвлэн нийтлэгчийн нэрлэсэн нэрийн эх хувийг хассан.
Бяцхан зураг дээр анхаарлаа төвлөрүүлэхэд маш мэдэгдэхүйц нөлөө нь дизайн болон бусад хэсгүүдийн нимгэн шугамуудаар дүрслэгдсэн байдаг. Хэд хэдэн төрлийн эффектүүд нь тайлбараас зураг, зөөлөн бөгөөд хөндлөнгийн бус 3D хувиргалт, псевдо элементүүдийн жигд шилжилтээс харагдана. Орчин үеийн хөтөч дээр бага ажилладаг.
iHover нь Bootstrap 3-ын тусламжтайгаар цэвэр CSS3 дээр дарахад гайхалтай эффектүүдийн цуглуулгатай. Scss CSS (файл)-аас санаа авсан, амархан өөрчилж болно. Модульчлагдсан код, файлыг бүхэлд нь ажилд оруулах шаардлагагүй. Нэг багцад 30 гаруй өөр эффект. Бүх зүйл сайн баримтжуулсан, үр нөлөө нь Використанд илүү хялбар байдаг. Таны хийх ёстой зүйл бол HTML-ийн байршлыг зөв гаргаж, ажиллахын өмнө CSS файлыг оруулах явдал юм.
Зургийн гарын үсэг зурах цагаас хамааран хэд хэдэн энгийн, гэхдээ загварлаг эффектүүдийг бий болгодог. Гол санаа нь та өнгөц зураг дээр хулганыг аваачихад гарчиг, зохиогчийн нэр, холбоос товчлуур үр дүнтэй гарч ирнэ. Тодорхой эффектүүдийн хувьд харааны 3D хувиргалтыг ашигладаг.
Хүрээн дэх зургийн эргэн тойронд ямар нэгэн тусгай хонх, шүгэлгүй, маш энгийн шилжилтийн эффект нь гүйж байх үед өөрчлөгдөж буй фокус болж хувирдаг, тэгээд л болоо.
CSS3 ашиглан өнгөц зургийн хувьд
Жижиглэн худалдаачин өөрийн бүтээлийг попап тайлбар (гарчиг)-аас өнгөц зураг руу шилжүүлэхэд үзүүлэх нөлөөг дүрслэн харуулахын тулд өөрийн бүтээлийг өгзөгний галерей болгон байрлуулдаг. Үүнийг одоогийн хөтчүүд, тэр дундаа IE 9+ дэмжинэ гэж мэдэгджээ. Мэдээжийн хэрэг, бүрэн хэмжээний галерей гэж нэрлэхэд хэцүү байдаг, гэхдээ гарын үсгийн харагдах нөлөө бүрэн дүүрэн байдаг.
Төгс дугуй хэлбэртэй өнгөц зураг дээр хулганыг гүйлгэн харахад сөрөг нөлөө үүсгэх үндсэн CSS дүрмийн багц. Багц нь сургалт, хөгжүүлэлтийн баримт бичиг зэрэг 7 төрлийн CSS3 шилжилтийг агуулдаг. Эффектүүдийг одоогийн хөтчүүд дэмждэг.
Хулганы хулганыг аваачих үед өнгөц зургийг боож байна
Хулганы курсорыг гүйлгэхэд дугуй өнгөц зургийг боох энгийн үр нөлөөг та миний блог дээрээс толгой дээрх бичлэгийн заруудаас харж болно. Энэ нь хэд хэдэн мөр CSS кодоор хэрэгждэг.
Хэрхэн үгчлэн орчуулах вэ: "Заасан үед бэлгийн нөлөө". Зэрлэг төсөөлөлгүй л бол ийм сексийн зүйл та анзаарагдахгүй байх магадлалтай, гэхдээ үр нөлөө нь өөрийн гэсэн арга замаар ашигтай бөгөөд шинэ хүнийг хүндлэх хүндэтгэлийг нэмэгдүүлдэг.
Та тэдгээрийг зааж өгөхөд үзүүлэх таван өөр эффект. Гурван хувилбарт гарын үсэг, янз бүрийн түвшний харагдахуйц хөшиг, хэвтээ хөдөлгөөнөөр боох.
4 CSS3 ашиглан хийгдсэн зургийн тайлбарын хөдөлгөөнт эффектийг харна уу. Шилжилтийн эффектийн дүр төрх бүхий өөр өөр байрлалууд нь бүхэлдээ стандарт юм. Хөдөлгөөнт дүрс хэрхэн ажилладагийг ойлгохын тулд дагалдах баримт бичгийг харалгүйгээр демо хуудасны гаралтын кодыг харна уу.
Гарын үсэг зурах, боох, хөгжүүлэх, нэгтгэх гэх мэт янз бүрийн эффект бүхий бяцхан зургууд галерейн сүлжээнд нэмэгдсэн. Эх сурвалжаас авсан баримт бичиг, тохируулга хангалтгүй, гэхдээ та тусгай хүсэлт гаргаж болно.
Энэ эффект нь ямар ч онцгой зүйл биш бөгөөд гүйлгэж байх үед зургийн тод байдлыг өөрчлөх эсвэл бүр хөдөлгөөнт дүрс нэмэхэд хүргэдэг. Та гаралтын демо-г уншсанаар хэрэгжилтийн нарийн ширийнийг өөрөө олж мэдэх хэрэгтэй болно.
Зургийн өөр нэг багц 10 хулганаар гулгах эффект, зөөвөрлөх, томруулах, эргүүлэх, эргүүлэх, харанхуйлах гэх мэт бяцхан дүрсийг өөр өөр харах боломжтой.
Зургийн эргэн тойронд хүрээний хөдөлгөөнт янз бүрийн эффектүүд, энэ нь маш сэтгэл татам харагддаг бөгөөд тохируулга, вики дээр тайлан байдаг.
CSS3 дээрх оригинал хулганын эффектүүд нь хулганыг аваачих үед өнгөц зургийн тайлбарыг үр дүнтэй гаргахад ашигладаг. CSS дүрмийн багц нь өөр өөр зурагт тохируулж болох 10 өөр эффект агуулдаг. Ялангуяа CSS3-ийн тусламжгүйгээр юу хийдгийг ойлгоход үр нөлөө нь үнэхээр нөлөөлдөг. Юу болсныг ойлгоход туслах дэлгэрэнгүй гарын авлага.
Санаа нь SVG үүсгэх бөгөөд энэ нь аливаа бичвэрийн дэвсгэр хэлбэр бөгөөд хулганыг түүн дээр байрлуулахад өөр хэлбэрт хувирдаг. Ийм байдлаар та хэд хэдэн өөр сонголтуудыг үүсгэж болох бөгөөд жишээ нь гурван төрлийн шилжилтийн эффектийг харуулж байна. SVG ашиглахын давуу тал нь бид маягтын хэмжээг анхны савны хэмжээтэй тааруулж өөрчлөх боломжтой юм.
Розсувнигийн зургууд
Энэ эффектийн мөн чанар нь тайлбар гарч ирэхийн тулд зургийг дээш доош харуулна. Хэрэв та хэв маягийн параметрүүдийг анхаарч үзвэл зарим сайхан эффектүүдийг авч чадна гэж би бодож байна, гэхдээ ерөнхийдөө бүх зүйл маш энгийн харагдаж байна.
Энэ нөлөөгөөр бүх зүйл энгийн, зургийн тайлбарууд нь баруун гарны дээд талд эсвэл доод хэсэгт харагдана, хуудасны доод хэсэгт мөрүүд нь бараан дэвсгэртэй харагдана, бүх зүйл CSS-ийн хүчийг ашиглан дахин форматлагдсан болно. .
Зохион бүтээсний дагуу өнгөц зургуудыг бараан харагдуулах үед дүрс гарч ирэх ба гарын үсэг нь цайвар дэвсгэр дээр нийлдэг.
Зургийн өмнөх тайлбар нь булангаас гарч ирэх бөгөөд зургийн бүх хэсгийг диагональ байдлаар өргөжүүлнэ.
Бяцхан зургийн өмнө гарын үсэг зурах өөр хэд хэдэн шийдэл байдаг. Онлайн засварлагч дээр та параметрүүдийг туршиж үзээд хүссэн үр дүндээ хүрч болно.
Өнгөц зурган дээр хулганыг гүйлгэн харахад олон янзын гадаад төрх байдал, зургийн тайлбарын дизайн. Бага зэрэг харанхуйлахаас ялгаатай нимгэн шугамууд нь ойлгоход хялбар мэдээллийн блокуудыг үүсгэдэг.
Өнгөц зургийг харуулахаас өмнө тайлбар гарч ирэх үед хөдөлгөөнт эффектийн улмаас химерик хэлбэрүүд болон эффектийг сайжруулдаг.
Зөвхөн CSS3 болон HTML5 ашиглан зураг дээр эзлэхүүнтэй тайлбарыг харуулах визуал слайд эффект үүсгэх жишээ.
Зурган дээрх 6 тайлбар
Нэмэлт CSS3 дээр хулганыг гүйлгэн ирэхэд зургийн өмнө тайлбар гарч ирэх 6 сонголт. Амралтын өдрүүдэд ашиглах боломжтой хэрэгжилт, тохируулгын хамгийн хэрэгтэй сургамж.
Эцэст нь хэлэхэд, би CSS3 ашиглан өнгөц зураг дээр нэгтгэх тайлбар үүсгэх хамгийн энгийн аргыг бодохгүй байхын аргагүй юм.
Энэ аргын талаар би өмнөх хичээлүүдийнхээ нэгэнд мэдсэн: .
Та сайт дээрх робот руу аль болох хурдан мессеж илгээхийг хүсч байна уу? Одоо энэ нь бүрэн боломжтой! Эдгээр энгийн шалтгааны улмаас TemplateMonster зах зээл дээр шинэ хэсэг гарч ирэв. Цуглуулга шинэчлэгдэх болно, гэхдээ та одоо онлайн төсөлдөө юу тохирохыг олж мэдэх боломжтой. Таны хийх ёстой зүйл бол хамгийн тохиромжтой бэлэн шийдлээ сонгож, шаардлагатай мэдээллийг танилцуулах замаар ажиллах явдал юм. Та үсгийн загварт текстийг гараар бичих ёстойг бүү мартаарай.
Хүндэтгэсэн Андрей
Юуны өмнө, энэ сэдвээр хараахан амжаагүй эсвэл огт хийгээгүй хүмүүст зориулж энэ нь юу болохыг товч тайлбарлая. Хулганы курсорыг тэдгээрийн дээр байрлуулах үед вэбсайтын элементүүдэд янз бүрийн төрлийн эффектүүдийг (гарчиг, зөвлөмж, жигд шилжилт, хувиргах, эргүүлэх, сайжруулах, нүүлгэн шилжүүлэх гэх мэт) хэрэглэж болно. Эдгээр эффектүүд нь янз бүрийн jQuery залгаасуудын тусламжтайгаар хэрэгжиж болно, мөн цэвэр .
Өнөөдөр би javascript сангуудыг холбохгүйгээр CSS3 ашиглан бүтээсэн зургийн эх хулганын эффектүүдийн томоохон цуглуулга бэлдэж байна. Би цэвэр CSS3 дээр hover эффектийг хэрэгжүүлэх давуу болон сул талуудын талаар ярихгүй, энэ бол өөр сэдэв, зүгээр л жишээнүүдийг гайхшруулж, шаардлагатай бол өөрийн сайт дээрх ижил төстэй байдлыг шалгаарай. Бүх эффектүүдийг нэг дор үзүүлэв. Гарын авлагууд нь их бага хэмжээний хөрөнгөтний шинж чанартай боловч бүх зүйл нь зөн совингоор тодорхойлогддог.
Эдгээр бүх програмууд зөвхөн CSS3-ийн хүчийг дэмждэг одоогийн хөтчүүдэд зөв ажиллаж байгааг би хүндэтгэж байгаагаа илэрхийлмээр байна.
Эффектүүдийн нэрсийг (бүх зорилго, зорилгоор) машин орчуулгад мушгихгүйгээр далд зургийг эвдэхгүйн тулд хэвлэн нийтлэгчийн нэрлэсэн нэрийн эх хувийг хассан.
Бяцхан зураг дээр анхаарлаа төвлөрүүлэхэд маш мэдэгдэхүйц нөлөө нь дизайн болон бусад хэсгүүдийн нимгэн шугамуудаар дүрслэгдсэн байдаг. Хэд хэдэн төрлийн эффектүүд нь тайлбараас зураг, зөөлөн бөгөөд хөндлөнгийн бус 3D хувиргалт, псевдо элементүүдийн жигд шилжилтээс харагдана. Орчин үеийн хөтөч дээр бага ажилладаг.
iHover нь Bootstrap 3-ын тусламжтайгаар цэвэр CSS3 дээр дарахад гайхалтай эффектүүдийн цуглуулгатай. Scss CSS (файл)-аас санаа авсан, амархан өөрчлөх боломжтой. Модульчлагдсан код, файлыг бүхэлд нь ажилд оруулах шаардлагагүй. Нэг багцад 30 гаруй өөр эффект. Бүх зүйл сайн баримтжуулсан, үр нөлөө нь Використанд илүү хялбар байдаг. Таны хийх ёстой зүйл бол HTML-ийн байршлыг зөв гаргаж, ажиллахын өмнө CSS файлыг оруулах явдал юм.
Зургийн гарын үсэг зурах цагаас хамааран хэд хэдэн энгийн, гэхдээ загварлаг эффектүүдийг бий болгодог. Гол санаа нь та өнгөц зураг дээр хулганаа аваачихад гарчиг, зохиогчийн нэр, холбоос товч үр дүнтэй гарч ирнэ. Тодорхой эффектүүдийн хувьд харааны 3D хувиргалтыг ашигладаг.
Хүрээн дэх зургийн эргэн тойронд ямар нэгэн тусгай хонх, шүгэлгүйгээр маш энгийн шилжилтийн эффект нь гүйлгэх үед өөрчлөгдөж буй фокус болж хувирдаг, тэгээд л болоо.
CSS3 ашиглан өнгөц зурган дээр хулганын эффектүүд
Жижиглэн худалдаачин өөрийн бүтээлийг попап тайлбар (гарчиг)-аас өнгөц зураг руу шилжүүлэхэд үзүүлэх нөлөөг дүрслэн харуулахын тулд өөрийн бүтээлийг өгзөгний галерей болгон байрлуулдаг. Үүнийг одоогийн хөтчүүд, тэр дундаа IE 9+ дэмжинэ гэж мэдэгджээ. Мэдээжийн хэрэг, бүрэн хэмжээний галерей гэж нэрлэхэд хэцүү байдаг, гэхдээ гарын үсгийн харагдах нөлөө бүрэн дүүрэн байдаг.
Төгс дугуй хэлбэртэй өнгөц зурган дээр хулганыг гүйлгэх үед сөрөг нөлөө үүсгэх үндсэн CSS дүрмийн багц. Энэхүү багц нь сургалт, хөгжүүлэлтийн баримт бичиг зэрэг 7 төрлийн CSS3 шилжилтийг агуулдаг. Эффектүүдийг одоогийн хөтчүүд дэмждэг.
Хулганы хулганыг аваачих үед өнгөц зургийг боож байна
Хулганы курсорыг гүйлгэхэд дугуй өнгөц зургийг боох энгийн үр нөлөөг та миний блог дээрээс толгой дээрх бичлэгийн заруудаас харж болно. Энэ нь хэд хэдэн мөр CSS кодоор хэрэгждэг.
Хэрхэн үгчлэн орчуулах вэ: "Заасан үед бэлгийн нөлөө". Зэрлэг төсөөлөлгүй л бол ийм сексийн зүйл та анзаарагдахгүй байх магадлалтай, гэхдээ үр нөлөө нь өөрийн гэсэн арга замаар ашигтай бөгөөд шинэ хүнийг хүндлэх хүндэтгэлийг нэмэгдүүлдэг.
Та тэдгээрийг зааж өгөхөд үзүүлэх таван өөр эффект. Гурван хувилбарт гарын үсэг, янз бүрийн түвшний харагдахуйц хөшиг, хэвтээ хөдөлгөөнөөр боох.
4 CSS3 ашиглан хийсэн зургийн тайлбарын хөдөлгөөнт эффектийг харна уу. Шилжилтийн эффектийн дүр төрх бүхий өөр өөр байрлалууд нь бүхэлдээ стандарт юм. Хөдөлгөөнт дүрс хэрхэн ажилладагийг ойлгохын тулд дагалдах баримт бичгийг харалгүйгээр демо хуудасны гаралтын кодыг харна уу.
Гарын үсэг зурах, боох, хөгжүүлэх, нэгтгэх гэх мэт янз бүрийн эффект бүхий бяцхан зургууд галерейн сүлжээнд нэмэгдсэн. Эх сурвалжаас авсан баримт бичиг, тохируулга хангалтгүй, гэхдээ та тусгай хүсэлт гаргаж болно.
Энэ эффект нь ямар ч онцгой зүйл биш бөгөөд гүйлгэж байх үед зургийн тод байдлыг өөрчлөх, эсвэл бүр хөдөлгөөнт дүрс нэмэхэд хүргэдэг. Та гаралтын демо-г уншсанаар хэрэгжилтийн нарийн ширийнийг өөрөө олж мэдэх хэрэгтэй болно.
Зургийн өөр нэг багц 10 хулганаар гулгах эффект, зөөвөрлөх, томруулах, эргүүлэх, эргүүлэх, харанхуйлах гэх мэт бяцхан дүрсийг өөр өөр харах боломжтой.
Зургийн эргэн тойронд хүрээний хөдөлгөөнт янз бүрийн эффектүүд, энэ нь маш сэтгэл татам харагддаг бөгөөд тохируулга, вики дээр тайлан байдаг.
CSS3 дээрх оригинал хулганын эффектүүд, тэдгээрийг зөөвөрлөх үед өнгөц зургийн тайлбарыг үр дүнтэй гаргахад ашигладаг. CSS дүрмийн багц нь өөр өөр зурагт тохируулж болох 10 өөр эффект агуулдаг. Ялангуяа CSS3-ийн тусламжгүйгээр юу хийж байгааг ойлгоход үр нөлөө нь үнэхээр нөлөөлдөг. Юу болсныг ойлгоход туслах дэлгэрэнгүй гарын авлага.
Санаа нь SVG үүсгэх бөгөөд энэ нь аливаа бичвэрийн дэвсгэр хэлбэр бөгөөд хулганыг түүн дээр байрлуулахад өөр хэлбэрт хувирдаг. Ийм байдлаар та хэд хэдэн өөр сонголтуудыг үүсгэж болох бөгөөд жишээ нь гурван төрлийн шилжилтийн эффектийг харуулж байна. SVG ашиглахын давуу тал нь бид маягтын хэмжээг анхны савны хэмжээтэй тааруулж өөрчлөх боломжтой юм.
Розсувнигийн зургууд
Энэ эффектийн мөн чанар нь тайлбар гарч ирэхийн тулд зургийг дээш доош харуулна. Хэрэв та хэв маягийн параметрүүдийг анхаарч үзвэл зарим сайхан эффектүүдийг авч чадна гэж би бодож байна, гэхдээ ерөнхийдөө бүх зүйл маш энгийн харагдаж байна.
Энэ нөлөөгөөр бүх зүйл энгийн, зургийн тайлбарууд нь баруун гарны дээд талд эсвэл доод хэсэгт харагдана, хуудасны доод хэсэгт мөрүүд нь бараан дэвсгэртэй харагдана, бүх зүйл CSS-ийн хүчийг ашиглан дахин форматлагдсан болно. .
Зохион бүтээсний дагуу өнгөц зургуудыг бараан харагдуулах үед дүрс гарч ирэх ба гарын үсэг нь цайвар дэвсгэр дээр нийлдэг.
Зургийн өмнөх тайлбар нь булангаас гарч ирэх бөгөөд зургийн бүх хэсгийг диагональ байдлаар өргөжүүлнэ.
Бяцхан зургийн өмнө гарын үсэг зурах өөр хэд хэдэн шийдэл байдаг. Онлайн засварлагч дээр та параметрүүдийг туршиж үзээд хүссэн үр дүндээ хүрч болно.
Өнгөц зурган дээр хулганыг гүйлгэн харахад олон янзын гадаад төрх байдал, зургийн тайлбарын дизайн. Бага зэрэг харанхуйлахаас ялгаатай нимгэн шугамууд нь ойлгоход хялбар мэдээллийн блокуудыг үүсгэдэг.
Өнгөц зургийг харуулахаас өмнө тайлбар гарч ирэх үед хөдөлгөөнт эффектийн улмаас химерик хэлбэрүүд болон эффектийг сайжруулдаг.
Өнгөц зураг дээрх давхардсан дүрсүүдийн гайхалтай эффектүүд өөр өөр сонголтоор харагдана. Використикийн хэрэглээнд (+) тэмдэг нь нэмэлт хүрээний радиусын ард тойргоор хүрээлэгдсэн байдаг: CSS дээр та фонтын дүрсүүдийг ялж, нэгтгэсэн самбарын илүү их мэдээллийн агуулгыг авах боломжтой.
Зөвхөн CSS3 болон HTML5 ашиглан зураг дээр эзлэхүүнтэй тайлбарыг харуулах визуал слайд эффект үүсгэх жишээ.
Зурган дээрх 6 тайлбар
Нэмэлт CSS3 дээр хулганыг гүйлгэн ирэхэд зургийн өмнө тайлбар гарч ирэх 6 сонголт. Амралтын өдрүүдэд ашиглах боломжтой хэрэгжилт, тохируулгын хамгийн хэрэгтэй сургамж.
Эцэст нь хэлэхэд, би CSS3 ашиглан өнгөц зураг дээр нэгтгэх тайлбар үүсгэх хамгийн энгийн аргыг бодохгүй байхын аргагүй юм.
Энэ зааварт бид CSS-тэй үргэлжлүүлэн ажиллах бөгөөд та зурган дээр хулганаа аваачиж, зураг сүүдэртэй жигд эргэлдэж, текстийн гарчгууд дээр тоймтой гарч ирэхэд гайхалтай эффект бий болно.
CSS эффектийг хувиргах блокуудын хүрээгээр дүрсэлсэн
Бид загвар бэлдэж байна, энэ нь Index гэсэн хоёр файлтай, CSS-г агуулсан. CSS-ийг дэвсгэрээс хасч, фонтыг суулгаж, зургийн арын дэвсгэр дээр нэмсэн. /img хавтас нь өөрөө хоёр файлтай, дэвсгэр нь өгзөгний зураг юм.
Хуудас дээр байрлуулах шаардлагатай бүх блокуудыг тайлбарлаж, текстээр нь бөглөнө.
Div.dws>div.blocImg>img+div.blocText>div.text>h2+p шилжилт 
CSS хулганын эффект
хувиргах масштаб(x,y)
:хулгана::өмнө::дараа
Зургийн үндсэн хэв маяг / css эффектийг тайлбарласан
Бид дүрс бүхий блокыг тогтмол өргөн, өндөрт тохируулж, халих: нуугдмал тусламжтайгаар тэдгээрийн хоорондох бүх оруулгыг нэмж, курсор нэмнэ.
BlocImg (өргөн: 600px; өндөр: 338px; халих: далд; курсор: заагч; )
Дэлгэцийн голд байрлах блок нь лавлахад хялбар байх үүднээс байрлуулсан.
Dws (байрлал: үнэмлэхүй; дээд: 50%; зүүн: 50%; хувиргах: орчуулах(-50%, -50%); )
Дараа нь зургийг 100% өргөн болгож, хөдөлгөөнт дүрс нь секундын турш жигд болно.
BlocImg img (өргөн: 100%; шилжилт: .5s; )
Хэмжээний шүүлтүүрийг 1 пип болгож тохируулна уу. filter: blur(1px) ба арын дэвсгэрийг бараан болгох ба үүний тулд бид .blocImg ангиллыг хар болгож нэмэх ба зургийг өөрөө аваачихад бид хагас тунгалаг болгох болно: .5; .
Dws:hover .blocImg img ( хувиргах: эргүүлэх(-10 градус) масштаб(1.3); шүүлтүүр: бүдгэрүүлэх (1px); тунгалаг байдал: .5; )
Одоо текстийг загварчилж эхэлцгээе.
Блокод текст оруулах
Мэдээжийн хэрэг, бид блокыг .blocText тексттэй байрлуулж, бүх ирмэгийн ирмэгийг 30 пиксел болгож тохируулна. Хүрээний дагуу тэд хөдөлгөөнт дүр төрхийг бүтээсэн.
BlockText (тойм: 1px хатуу улбар шар; байрлал: үнэмлэхүй; дээд: 30px; зүүн: 30px; баруун: 30px; доод: 30px; )
Текстийн хувьд агуу зохиолчдын адил цагаан өнгийг тохируулж, ирмэгийн дагуу дэвсгэр нэмнэ.
Текст (өнгө: #fff; текст хувиргах: том үсгээр; дэвсгэр: 0 20px; )
Өөр түвшний толгой хэсгийг 25 зураг гэж тохируулсан.
Текст h2 (фонтын хэмжээ: 25px; )
Үүний өөр нэг хэсэг нь улбар шар өнгөтэй байх ёстой, будаа нь доод талаас нь оруулж, доод түшлэг нь 2 ширхэг байх ёстой.
Текст h2 зай (өнгө: улбар шар; дэвсгэр-доод: 3px; хүрээ-доод: 2px хатуу #fff; )
Догол мөр нь туйлын байрлалтай, 180 оргилоор буурсан байна. Энэ блокийн өргөнийг 250 пиксел болгож тохируулна уу. Зүүн талаас хилийг 4 цэгээр нэмнэ. мөн бид дотоод орцуудыг тохируулсан.
Текст p (байрлал: үнэмлэхүй; дээд: 180px; өргөн: 250px; зүүн талын хүрээ: 4px хатуу #ffb611; дэвсгэр: 0 10px; )
Псевдо-элементүүдийг ::өмнө ба::дараа тайлбарла
Өмнө нь .blocText ангид хуваарилагдсан тоймыг авч, псевдо-элементүүдэд тохируулъя.
Бид :: өмнө :: дараа псевдо-элементүүдийг үүсгэж, үндсэн хэв маягийг нь дүрсэлдэг.
Бид тэдгээрийг бүрэн байрлуулж, өргөн, өндрийг 100% болгож, секундын дотор гарч ирнэ.
BlocText::fore, .blocText::after ( агуулга: ""; байрлал: үнэмлэхүй; дээд: 0; зүүн: 0; өргөн: 100%; өндөр: 100%; )
Окремо ::бид дээд ба доод талаас хилийг 1 пикээр түрхэхээс өмнө. мөн X тэнхлэгт хувиргах өөрчлөлтийг тохируулна уу: scale(0,1) .
BlocText::forfor ( хүрээ-дээд: 1px хатуу #fff; хүрээ-доод: 1px хатуу #fff; хувиргах: масштаб(0,1); )
::-д мөн адил үйлчилнэ: дараа нь зөвхөн хил зүүн, баруун талд байгаа бөгөөд хувиргалт нь Y тэнхлэгийн дагуу байна.
BlockText::after (зүүн хүрээ: 1px хатуу #fff; баруун хүрээ: 1px хатуу #fff; хувиргах: масштаб(1,0); )
Тэдний гадаад төрх байдлын хувьд бүх тэнхлэгийн өөрчлөлтийг 1 гэж тодорхойлсон.
Dws:hover .blocText::өмнө, .dws:hover .blocText::дараа ( хувиргах: масштаб(1,1); )
Би .text анги нь тунгалаг байх ёстой текстийг нэмэх боломжгүй: 0 ба жигд харагдах байдлыг нэмнэ.
Мөн хулганыг авсны дараа текст гарч ирнэ.
Dws:hover .текст ( тунгалаг байдал: 1; )
Тэд зураг руу чиглүүлсэн цагаас эхлэн гайхалтай Hover Effects-ийг устгасан.
Хэрэв танд видео таалагдсан бол нийгмийн сүлжээн дэх найзуудтайгаа хуваалцаж, хэн нэгэнд сэтгэгдэл бичихээ бүү мартаарай.
Хичээлийг Денис Горелов бэлтгэсэн.
Таблетууд
