03:33 Анимированные шестеренки посредством CSS3 | |
| В нашем сегодняшнем уроке мы будем заниматься разработкой шестеренок, анимированных посредством CSS3. Результат получится очень милым. Мы использовали слайды CSS3, анимацию и трансформации (rotate) для того, чтобы достичь подобного результата. Пожалуйста, обратите внимание, что данное демо будет работать в Firefox и Chrome / Safari (webkit). [img]/uploads/posts/2012-04/1335432149_animated-gear.jpg[/img] Давайте посмотрим на примеры, и скачаем предложенные исходные файлы: Посмотреть демо | Скачать архив Внимание! У вас нет прав для просмотра скрытого текста. Этап 1 – HTML Как обычно, начнем с разработки кода HTML. Предлагаем вам html-код нашего примера. Здесь все основано на простеньких div-элементах. index.html Этап 2 - CSS Теперь предлагаем вам файл стилей для наших шестеренок. css/layout.css /* CSS3 keyframes */@-webkit-keyframes ckw {0% {-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);}100% {-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);}}@-moz-keyframes ckw {0% {-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);}100% {-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);}}@-webkit-keyframes cckw {0% {-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);}100% {-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);}}@-moz-keyframes cckw {0% {-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);}100% {-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);}}/* gears */.gear {float: none;position: absolute;text-align: center;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-moz-animation-direction: normal;-moz-animation-delay: 0;-moz-animation-play-state: running;-moz-animation-fill-mode: forwards;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;}#gear1 {background: url('../images/g1.png') no-repeat 0 0;height: 85px;left: 31px;top: 45px;width: 85px;-moz-animation-name: ckw;-moz-animation-duration: 10s;-webkit-animation-name: ckw;-webkit-animation-duration: 10s;}#gear2 {background: url('../images/g2.png') no-repeat 0 0;height: 125px;left: 105px;top: 10px;width: 125px;-moz-animation-name: cckw;-moz-animation-duration: 16.84s;-webkit-animation-name: cckw;-webkit-animation-duration: 16.84s;}#gear3 {background: url('../images/g3.png') no-repeat 0 0;height: 103px;left: 149px;top: 118px;width: 103px;-moz-animation-name: ckw;-moz-animation-duration: 13.5s;-webkit-animation-name: ckw;-webkit-animation-duration: 13.5s;}#gear4 {background: url('../images/g4.png') no-repeat 0 0;height: 144px;left: 46px;top: 173px;width: 144px;-moz-animation-name: cckw;-moz-animation-duration: 20.2s;-webkit-animation-name: cckw;-webkit-animation-duration: 20.2s;}#gear5 {background: url('../images/g1.png') no-repeat 0 0;height: 85px;left: 127px;top: 292px;width: 85px;-moz-animation-name: ckw;-moz-animation-duration: 10s;-webkit-animation-name: ckw;-webkit-animation-duration: 10s;}#gear6 {background: url('../images/g2.png') no-repeat 0 0;height: 125px;left: 200px;top: 283px;width: 125px;-moz-animation-name: cckw;-moz-animation-duration: 16.84s;-webkit-animation-name: cckw;-webkit-animation-duration: 16.84s;}#gear7 {background: url('../images/g3.png') no-repeat 0 0;height: 103px;left: 277px;top: 217px;width: 103px;-moz-animation-name: ckw;-moz-animation-duration: 13.5s;-webkit-animation-name: ckw;-webkit-animation-duration: 13.5s;} Этап 3 - Изображения В примере мы использовали следующие изображения: [img]/uploads/posts/2012-04/1335432169_g1.png[/img] [img]/uploads/posts/2012-04/1335432132_g2.png[/img] [img]/uploads/posts/2012-04/1335432203_g3.png[/img] [img]/uploads/posts/2012-04/1335432177_g4.png[/img] Заключение Надеемся, что вам понравилось наше сегодняшнее руководство. Не забудьте о комментариях и идеях! Удачи! | |
|
| |
| Всего комментариев: 0 | |
