9:07 PM Урок №9 Движения в CSS3 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Движения в CSS3Чрез CSS3, можем да добавяме ефект като променяме един стил в друг, без да използваме Flash анимации или JavaScript. PC-Tools
Поддържащи браузъри:Цифрите в таблицата определят най-ниската версия на браузъра която напълно поддържа това CSS3 свойство.Числата след които има -webkit-, -moz-, или -o- определят първата версия която е работа с префикс.
Какво представляват движенията в CSS3?CSS3 движенията са ефект който позволява на елемента градивно да се промени от един стил в друг.За да постигнете това трябва да зададете две неща:
ПримерДобавяне на ефект с движение върху width свойството с продължителност 2 секунди: div {
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; } Бележка: Ако не зададете продължителност, движението няма да има ефект, защото по подразбиране стойността е 0. Ефекта движение започва когато зададеното CSS свойство промени своята стойност. Типична промяна на CSS свойство би била когато потребителя мине с мишката през елемент или mouse-over: ПримерЗадаване на :hover за <div> елементите: div:hover {
Бележка: Когато курсора се отдръпне от елемента или mouse out, той градивно се връща към оригиналният си стил.width: 300px; } Множество промениЗа да добавите ефект с движение за повече от едно CSS свойство, разделяйте свойствата със запетаи: ПримерДобавяне на ефект с движение върху свойствата width, hight и transform: div {
-webkit-transition: width 2s, height 2s,-webkit-transform 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s, height 2s, transform 2s; } Още примери за движения:Този пример използва всичките четири свойства за движения: Примерdiv {
/* For Safari 3.1 to 6.0 */ -webkit-transition-property: width; -webkit-transition-duration: 1s; -webkit-transition-timing-function: linear; -webkit-transition-delay: 2s; /* Standard syntax */ transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; } В този пример ние задаваме на ефекта да започне след 2 секунди. Същият ефект на движение от примера по-горе. Както и да е, тук ще използваме шорткода за свойството движение: Примерdiv {
-webkit-transition: width 1s linear 2s; /* For Safari 3.1 to 6.0 */ transition: width 1s linear 2s; } Свойства на движенията в CSS3Тази таблица разглежда всички свойства на движенията в CSS3
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Ако урокът ви е харесал можете да го споделите с вашите приятели във фейсбук :
| Всички коментари: 0 | |
