CSS3 Transitions Стварыць Nice Fade эфекты
Вэб-дызайнеры ўжо даўно пажадана больш кантролю над старонкамі, яны стваралі калі CSS3 дзівяць сцэну. У новых стылях , прадстаўленыя ў CSS3 далі вэб - прафесіяналам магчымасць дадаць Photoshop-падобныя эфекты на іх старонкі. Гэта ўключае такія ўласцівасці , як цень і палае , закругленыя куты, і многія іншыя. CSS3 таксама прадставіў анімацыйныя эфекты, падобныя, якія могуць быць выкарыстаны для стварэння прыгожага інтэрактыўнасці на сайтах.
Адзін вельмі добры візуальны эфект , які вы можаце дадаць элементы на вашым сайце з дапамогай CSS3 , каб зрабіць іх знікаць і, выкарыстоўваючы камбінацыю уласцівасцяў для непразрыстасці і пераходу. Гэта просты і добра падтрымліваецца спосаб зрабіць вашыя старонкі больш інтэрактыўнымі, ствараючы выцвілыя ўчасткі, якія прыходзяць у цэнтр увагі, калі наведвальнік сайта робіць нешта, як лунае над гэтым элементам.
Давайце паглядзім, як лёгка дадаць гэты ўзаемадзейнічаюць візуальны эфект розных элементаў на вэб-старонках ..
Хай & # 39; s Змена непразрыстасці на Hover
Мы пачнем з разгляду таго, як змяніць непразрыстасць выявы, калі кліент знаходзіцца над гэтым элементам. Для гэтага прыкладу (HTML, як паказана ніжэй) Я выкарыстоўваю малюнак з атрыбутам класа з greydout.
Для таго, каб зрабіць яго неактыўны, мы дадамо наступныя правілы стылю для нашага CSS стыляў:
.greydout {
-webkit-непразрыстасць: 0,25;
-moz-непразрыстасць: 0,25;
Непразрыстасць: 0,25;
}
Гэтыя налады непразрыстасці перавесці да 25%. Гэта азначае, што малюнак будзе паказана, як 1/4 яго нармальнай празрыстасці. Цалкам непразрыстыя, без празрыстасці будзе 100%, а 0% будзе цалкам празрыстым.
Затым, каб зрабіць малюнак высветліцца (ці больш дакладна, каб стаць цалкам непразрысты), калі мыш завіс над ім, вы б дадаць: парыць псеўда-клас:
.greydout: парыць {
-webkit-Непразрыстасць: 1;
-moz-Непразрыстасць: 1;
Непразрыстасць: 1;
}
Вы заўважыце, што для гэтых прыкладаў, я выкарыстоўваю пастаўшчык прыстаўку версію правілы для забеспячэння зваротнай сумяшчальнасці для старых версій гэтых браўзэраў. Нягледзячы на тое, што гэта добрая практыка, рэальнасць такая, што правіла непразрыстасці зараз добра падтрымліваецца браўзэрамі і гэта даволі бяспечна скідаць пастаўшчык прыстаўкі ліній. Тым не менш, няма таксама ніякіх падстаў не ўключаць гэтыя прэфіксы, калі вы хочаце, каб забяспечыць падтрымку старых версій браўзэраў. Проста пераканайцеся, што справядліва прынятай перадавой практыкі спынення дэкларацыі з нармальнай, ані-прыстаўкай версіі стылю.
Калі разгарнуць гэта на сайце, вы б пабачылі, што гэтая карэктоўка непразрыстасці вельмі рэзкае змяненне. Па-першае, гэта шэры, а затым гэта не так, без якіх-небудзь прамежкавых станаў паміж гэтымі двума. Гэта як выключальнік святла - уключаны або выключаны. Гэта можа быць тое, што вы хочаце, але вы таксама можаце паэксперыментаваць са змяненнем, якое больш паступовым.
Для таго, каб дадаць сапраўды добры эфект і зрабіць гэта вяне паступова, вы хочаце, каб дадаць ўласцівасць пераходу да класа .greydout:
.greydout {
-webkit-непразрыстасць: 0,25;
-moz-непразрыстасць: 0,25;
Непразрыстасць: 0,25;
-webkit-пераход: усе 3s лёгкасць;
-moz-пераход: усе 3s лёгкасць;
-ms-пераход: усе 3s лёгкасць;
-о-пераход: усе 3s лёгкасць;
Пераход: усе 3s лёгкасць;
}
З дапамогай гэтага кода, змена будзе пераходзіць паступова, а не проста пераключэнне рэзка.
Яшчэ раз, мы выкарыстоўваем шэраг пастаўшчыкоў приставочных правілаў тут. Пераход не так добра падтрымліваецца ў непразрыстасці, таму гэтыя прэфіксы маюць сэнс.
Адна рэч, каб памятаць, як вы плануеце гэтыя ўзаемадзеяння з'яўляецца тое, што сэнсарны экран прылады не маюць «лунання» стан, так што гэтыя эфекты часта губляюцца на тых, хто з дапамогай сэнсарнага экрана прылады, як мабільны тэлефон. Пераход часта бывае, але гэта адбываецца так хутка, што яны на самой справе не могуць быць бачныя. Гэта нармальна, калі вы дадаеце гэта як прыемны бонус эфект, але пазбегнуць якіх-небудзь змяненняў, якія павінны разглядацца для ўтрымання варта разумець.
Вывядзенне таксама магчыма
Вам не прыйдзецца пачынаць з выцвілымі малюнкамі, вы можаце выкарыстоўваць пераходы і непразрыстасць, каб знікнуць з цалкам непразрыстага малюнка. Выкарыстоўваючы адзін і той жа вобраз, толькі з класам withfadeout:
клас = "withfadeout">
Гэтак жа, як і раней, вы зменіце непразрыстасць з дапамогай: селектар лунання:
.withfadeout {
-webkit-пераход: усе 2s лёгкасць у выкатывания;
-moz-пераход: усе 2s лёгкасць у выкатывания;
-ms-пераход: усе 2s лёгкасць у выкатывания;
-о-пераход: усе 2s лёгкасць у выкатывания;
Пераход: усе 2s лёгкасць у выкатывания;
}
.withfadeout: парыць {
-webkit-непразрыстасць: 0,25;
-moz-непразрыстасць: 0,25;
Непразрыстасць: 0,25;
}
У гэтым прыкладзе малюнак будзе пераход ад цалкам непразрыстага да некаторай ступені празрыстага - у адваротным кірунку нашага першага прыкладу.
Выходзячы за межы малюнкаў
Гэта выдатна, што вы можаце ўжыць гэтыя візуальныя пераходы і згасае да малюнкаў, але не абмяжоўваецца толькі выкарыстаннем малюнкаў з гэтымі эфектамі CSS. Вы можаце лёгка зрабіць CSS-стыль кнопкі, якія знікаюць пры націску і ўтрымліванні. Вы б проста ўсталяваць празрыстасць з дапамогай: актыўны псеўда-клас і змясціць пераход на клас, які вызначае кнопку. Націсніце і ўтрымлівайце гэтую кнопку, каб убачыць, што адбываецца.
Гэта можна зрабіць па сутнасці любога візуальнага элемента замірання пры навядзенні над або пстрыкнуў. У гэтым прыкладзе я змяніць непразрыстасць DIV і колер тэксту, калі мыш знаходзіцца над ім. Вось CSS:
#myDiv {
шырыня: 280px;
колер фону: # 557A47;
колер: #dfdfdf;
абіўка: 10px;
-webkit-пераход: усе 4s лёгкасць з 0s;
-moz-пераход: усе 4s лёгкасць з 0s;
-ms-пераход: усе 4s лёгкасць з 0s;
-о-пераход: усе 4s лёгкасць з 0s;
Пераход: усе 4s лёгкасць з 0s;
}
#myDiv: парыць {
-webkit-непразрыстасць: 0,25;
-moz-непразрыстасць: 0,25;
Непразрыстасць: 0,25;
колер: # 000;
}
Рух меню можа прынесці карысць ад выцвітання колеру фону
У гэтым простым меню навігацыі колер фону павольна выліньвае і, як я мышы над пунктамі меню. Вось HTML:
- дома
- CSS3 падручнікі
- ўласцівасці CSS3
А вось CSS:
уль # sampleNav {спіс-стыль: не; }
уль # sampleNav Li {
Дысплей: убудаваны;
плаваць: злева;
абіўка: 5px 15px;
Запас: 0 5px;
-webkit-пераход: усе 2s лінейны;
-moz-пераход: усе 2s лінейны;
-MS-пераход: усе 2s лінейны;
-o-пераход: усе 2s лінейны;
Пераход: усе 2s лінейны;
}
уль # sampleNav Лі а {тэкст-аздабленне: няма; }
уль # sampleNav Ці: парыць {
колер фону: # DAF197;
}
падтрымка браўзэраў
Як я ўжо закрануў некалькі разоў ужо, гэтыя стылі маюць вельмі добрую падтрымку браўзэра, так што вы павінны адчуваць сябе свабодна выкарыстоўваць іх без трапятання. Адзіным выключэннем з'яўляецца значна больш старыя версіі Internet Explorer, але з нядаўнім рашэннем Microsoft, каб спыніць падтрымку ўсіх версій IE ніжэй 11, гэтыя старыя браўзэры становяцца ўсё менш і менш важнай праблемай - і рэалістычна, калі старэйшы браўзэр не убачыць гэты выцвітання пераход, які не павінен быць сур'ёзнай праблемай. Да таго часу, як вы абмежаваць гэтыя віды эфектаў для прыемных узаемадзеянняў і не спадзявацца на іх, каб кіраваць функцыянальнасцю або раскрыць ключавое ўтрыманне, то старыя браўзэры, якія не падтрымліваюць эфекты атрымаюць менш прыемны вопыт, але карыстальнікі гэтых браўзэраў не будуць нават ведаць розніцу, асабліва, калі яны могуць выкарыстоўваць сайт як нармальны і атрымаць інфармацыю, якая ім патрэбна.
Extra Fun; Памяняйце двух малюнкаў
Вось прыклад таго, як знікне адзін малюнак ў іншае. Выкарыстоўвайце HTML:
І CSS, які робіць адзін цалкам празрыстым, а другі цалкам непразрыстым, а затым пераход мяняе месцамі два:
.swapMe IMG {-webkit-пераход: усе 1s лёгкасць у выкатывания; -moz-пераход: усе 1s лёгкасць у выкатывания; -ms-пераход: усе 1s лёгкасць у выкатывания; -о-пераход: усе 1s лёгкасць у выкатывания; Пераход: усе 1s прастата ў выкатывания; } .swap1, .swapMe: парыць .swap2 {-webkit-Непразрыстасць: 1; -moz-Непразрыстасць: 1; Непразрыстасць: 1; } .swapMe: лунання .swap1, .swap2 {-webkit-непразрыстасць: 0; -moz-непразрыстасць: 0; Непразрыстасць: 0; }