CSS3 шилжилтүүд Nice Fade Effects үүсгэ
Вэбсайт дизайнерууд нь CSS3-ыг цохих үед үүсгэсэн хуудсуудад илүү их хяналт тавьдаг байсан. CSS3- д танилцуулсан шинэ загвар нь вэбсайтуудад Photoshop-тэй төстэй нөлөөг өөрсдийн хуудсан дээр нэмэх боломжийг олгосон. Үүнд дусал сүүдэр, сараалж , булангийн булан зэрэг шинж чанарууд багтана. CSS3 нь мөн сайт дээрх интерактив шинж чанарыг бий болгоход ашиглаж болох анимэшнүүдийн үр дүнг танилцуулсан.
CSS3 ашиглан таны вэбсайт дахь элементүүдэд нэмэх нь маш сайхан харагдах нөлөөг харуулах ба арилгахын тулд шинж чанаруудыг хослуулан ашиглах боломжийг олгодог. Энэ нь сайтын зочдод ямар нэгэн зүйл хийхэд анхаарлаа төвлөрүүлсэн бүдгэрүүлэх бүлгийг үүсгэх замаар хуудсуудыг илүү интерактив болгоход хялбар, сайтар дэмждэг арга юм.
Вэб хуудсан дээрх янз бүрийн элементүүдтэй энэ харилцан үйлчлэлийн нөлөөг нэмж оруулахад хэр хялбар болохыг харцгаая.
Hover-ыг өөрчлөх Opacity-г тохируулна уу
Үйлчлүүлэгч элемент дээр тээгч байхдаа дүрсийн үл ойлгогдох байдлыг хэрхэн өөрчлөхийг харах болно. Энэ жишээнд (HTML зургийг доор харуулав) Би градусын ангийн шинж чанар бүхий зургийг ашиглаж байна.
Үүнийг саарал болгохын тулд бид дараах загварын дүрмийг манай CSS загварт нэмнэ үү:
.greydout {
-webkit-opacity: 0.25;
-moz-гэрэлтүүлэг: 0.25;
Ил тод байдал: 0.25;
}
Эдгээр тунгалаг байдлын тохиргоо нь 25% болж хувирдаг. Энэ нь зургийг хэвийн ил тод байдлын 1/4 гэж үзүүлнэ гэсэн үг юм. Ил тод байхгүйгээр бүрэн тунгалаг байдал 100% байхад 0% нь бүрэн ил тод байх болно.
Дараа нь, хулганыг тэндээсээ буцаж ирэхэд зургийг тодорхой болгох (эсвэл илүү нарийвчлалтай, бүрэн тунгалаг болгохын тулд): hover pseudo-class:
.greydout: hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
Эдгээр жишээнүүдийн хувьд эдгээр хөтчүүдийн хуучин хувилбаруудын хувьд backward compatibility байлгахын тулд дүрэмчний өмнөх угтвартай хувилбарыг ашиглаж байна. Хэдийгээр энэ нь сайн практик боловч бодит байдал нь browsers-оор дэмжигдсэн дүрмийг сайн дэмждэг бөгөөд тэдгээр нь үйлдвэрлэгчдийн өмнөх урсгалтай шугамыг багасгахад аюулгүй байдаг. Хуучин хөтөчийн хувилбаруудын дэмжлэгийг хангахыг хүсвэл эдгээр угтваруудыг оруулахгүй байх шалтгаан ч байхгүй. Мэдэгдлийн төгсгөлийг хүлээн зөвшөөрсөн хамгийн сайн туршлагыг дагаж мөрдөж байгаарай.
Хэрэв та энэ сайт дээр байрлуулсан бол энэ тодотгол тохируулга нь гэнэт өөрчлөгдөж байгааг харж болно. Эхлээд энэ нь саарал, дараа нь эдгээр хоёр хоёрын хооронд завсрын төлөв байхгүй байна. Энэ нь гэрлийн унтраалгатай адил юм. Энэ нь таны хүсч байгаа зүйл байж болох ч, та бас илүү аажмаар өөрчлөлтийг туршиж үзэхийг хүсч болно.
Үнэхээр сайхан үр нөлөөг нэмэхийн тулд энэ алгуур аажим аажмаар шилжүүлэхийн тулд шилжилтийн хөрөнгийг .greydout анги руу нэмэхийг хүсэж байна:
.greydout {
-webkit-opacity: 0.25;
-moz-гэрэлтүүлэг: 0.25;
Ил тод байдал: 0.25;
-webkit-transition: бүх 3-н хялбар;
-moz-transition: бүх 3-н хялбар;
-с-шилжилтийн: бүх 3-н хялбар;
-тушгиа: бүх 3-н хялбар;
Шилжилт: бүх 3-н хялбар;
}
Энэ кодоор энэ өөрчлөлт гэнэт шилжихээсээ илүү аажмаар шилжинэ.
Дахин хэлэхэд бид олон тооны борлуулагчдын урдчилсан дүрэм ашиглаж байна. Шилжилтийг сайнаар дэмжиж чаддаггүй тул эдгээр угтварууд нь утга учиртай юм.
Эдгээр харилцан үйлчлэлийг төлөвлөхдөө нэг л зүйлийг санах нь мэдрэгч дэлгэцтэй төхөөрөмжүүд нь "hover" төлөвгүй учраас гар утсууд шиг мэдрэгчтэй дэлгэцтэй төхөөрөмжийг ашиглан хэн нэгэнд эдгээр үр дүнг алддаг. Шилжилт нь ихэвчлэн тохиолддог, гэхдээ энэ нь үнэхээр харагдахгүй тийм хурдан болдог. Хэрэв та үүнийг урамшууллын нөлөөг нэмж байгаа бол энэ нь сайн хэрэг юм, гэхдээ агуулгыг ойлгохын тулд НЭЭЖЛЭГ гэсэн өөрчлөлтүүдээс зайлсхий.
Алдагдах нь хэтэрхий боломжтой
Та бүдгэрсэн дүрсийг эхлүүлэх шаардлагагүй, бүрэн гэрэлтүүлгийн дүр зургаас гарахын тулд шилжилтийн болон гэрэлтүүлгийг ашиглаж болно. Ижил дүр төрхийг ашиглан зөвхөн таниулах ангитай:
class = "withfadeout">
Өмнө нь байсан шиг та opacity-г өөрчилнө: hover selector:
.withfadeout {
-webkit-transition: бүх 2-д нь хялбаршуулсан;
-moz-transition: бүх 2-д нь хялбаршуулсан;
-с-шилжилтийн: бүх 2-ыг хялбаршуулсан;
-тухай шилжилтийн: бүх 2-аар хялбаршуулсан;
Шилжилт: бүх 2-аар хялбаршуулсан;
}
.withfadeout: hover {
-webkit-opacity: 0.25;
-moz-гэрэлтүүлэг: 0.25;
Ил тод байдал: 0.25;
}
Энэ жишээнд, дүр төрх нь бүрэн дүр төрхөөс арай ил тод болж хувирсан - бидний анхны жишээний урвуу юм.
Зургийн гадна талд оруулах
Та эдгээр дүрслэлийг дүрслэн харуулж, зургуудыг бүдгэрүүлэх нь маш сайн арга юм. Гэхдээ эдгээр CSS-ийн нөлөөгөөр зургийг зөвхөн ашиглахад хязгаарлагдахгүй. Та дарж, хадгалж байхдаа CSS-загварын товчлууруудыг хялбархан хийж болно. Та зүгээр л идэвхтэй псевдо-классыг ашиглан opacity-ийг тохируулаад товчлуурыг тодорхойлсон анги дээр шилжинэ. Энэ товчлуур дээр дарж, юу болохыг хараарай.
Ер нь ямар нэгэн харагдах элементийг арилгаж эсвэл товшсон үед алдаж болно. Энэ жишээн дээр хулганы дээгүүр өнгөрөх үед текстийн өнгө болон дүр төрхийг үл харгалзан библийн өнгө өөрчлөгдөх болно. Энд CSS байна:
#myDiv {
өргөн: 280px;
суурь өнгө: # 557A47;
өнгө: #dfdfdf;
padding: 10px;
-webkit-transition: бүх 4-д хялбар 0-оор;
-moz-transition: бүх 4-ээс хялбар 0-оор;
-с-шилжилтийн: бүх 4-ээс хялбар 0-оор;
-тухай шилжилтийн: бүх 4-хөн хялбар 0-оор;
Шилжилт: бүх 4-хөн хялбар 0s;
}
#myDiv: hover {
-webkit-opacity: 0.25;
-moz-гэрэлтүүлэг: 0.25;
Ил тод байдал: 0.25;
өнгө: # 000;
}
Хөдөлгөөний цэсүүд нь Дэгжин өнгөт дэвсгэрээс хүртэх боломжтой
Энгийн хөтчийн цэсэнд үндсэн өнгө нь цэсний эд зүйлс дээр хулганаар аажмаар гарч ирдэг. Энд HTML:
- Нүүр хуудас
- CSS3 хичээлүүд
- CSS3 Properties
Энд CSS байна:
ul # sampleNav {жагсаалт-style: none; }
ul # sampleNav li {
дэлгэц: inline;
float: left;
padding: 5px 15px;
margin: 0 5px;
-webkit-transition: бүх 2-н шугаман;
-moz-шилжилтийн: 2см бүх шугаман;
-с-шилжилт: бүх 2см шугаман;
- шилжилт: бүх 2суу шугаман;
Шилжилт: бүх 2т шугаман;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: hover {
суурь өнгө: # DAF197;
}
Хөтөчийн дэмжлэг
Би хэд хэдэн удаа энэ талаар ярих тусам эдгээр загварууд нь маш сайн хөтөч дээр тулгуурласан байдаг тул та эдгээрийг ямар ч хайхрамжгүйгээр хэрэглэх эрхтэй байх ёстой. Үүнийг цорын ганц үл хамаарах зүйл нь Internet Explorer-ийн хуучин хувилбарууд боловч доорх IE-ийн бүх хувилбаруудын дэмжлэгийг зогсоохын тулд Microsoft-ийн саяхан гарсан шийдвэрийг дагаад эдгээр хуучин хөтөч нь асуудал болоод зогсохгүй, хуучин хөтөч нь Энэ нь шилжих шилжилтийг харна уу, энэ нь гол асуудал биш байх ёстой. Эдгээр төрлийн нөлөөллүүд нь тааламжтай харилцан үйлчлэлд хүртэл хязгаарлагддаг бөгөөд функцийг удирдах эсвэл гол агуулгыг задлахад найдахгүй байгаа бол үр дүнг дэмждэггүй ахмад хөтчүүд нь илүү тааламжгүй мэдрэмжийг авах болно, гэхдээ тэдгээр хөтчүүд дээрх хэрэглэгчдийг тэр ч бүү хэл Ялангуяа, сайтыг хэвийн байдлаар ашиглах боломжтой бөгөөд хэрэгцээтэй мэдээллээ олж авах боломжтой бол ялгааг мэд.
Нэмэлт хөгжил, Хоёр зураг солилцох
Энд нэг дүрсийг алга болгох жишээ байна. HTML ашиглах:
Нөгөөтэйгүүр нөгөө нэг нь ил тод, ил тод болгодог CSS нь шилжинэ, дараа нь шилжилтийн хоёрыг своп:
.swapMe img {-webkit-transition: бүх 1-ээр хялбаршуулсан; -moz-transition: бүх 1-ээс хялбар; -с-шилжилтийн: бүх 1-ээс хялбар; -тушгиа: бүх 1-д нь хялбаршуулсан; Шилжилт: бүх 1-үүдийг хялбархан ашиглах; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; opacity: 0; }