Все для веб-дизайнера
Эффект вращения изображения с помощью CSS
В последнее время методики разработки весьма расширились, новые приемы и подходы весьма упрощают верстку при этом возможности хорошего разработчика ограничиваются только фантазией мастера. В данном уроке мы рассмотрим возможности небольшой анимации с помощью css и jquery. Этот эффект будет работать только в браузерах поддерживающих трансформации, во всех остальные эффект будет отображаться некорректно. С помощью данного преобразования можно отлично подчеркнуть необходимую информацию на сайте.
Данный эффект полностью основан на правилах CSS. Тогда зачем тут нужен jQuery? Данная нужен для автоматизации генерации CSS кода. И так, приступим.
Шаг 1. HTML
Для начала создадим стек изображений. По умолчанию, положение каждого из изображений будет отличаться друг от друга поворотом на несколько градусов. Далее инициируем вращение изображений вокруг своей оси.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<!DOCTYPE html> <html> <head> <script src="jquery-1.6.4.min.js"></script> <script> $(function() { var tot = $(".img_c").length; var stat = deg = 10; var rotate = ""; var frame, mozframe, webkitframe; $("img").each(function(index) { $(this).css({ "transform": "rotate("+deg+"deg)", "-moz-transform": "rotate("+deg+"deg)", "-webkit-transform": "rotate("+deg+"deg)", "-o-transform": "rotate("+deg+"deg)" }); rotate = "100% {" + "transform: rotate(360deg);" + "-moz-transform: rotate(360deg);" + "-webkit-transform: rotate(360deg);" + "-o-transform: rotate(360deg);" + "} "; var imgclass = parseInt(index+1); frame = " @keyframe anim" + imgclass + " { " + rotate + "}"; mozframe = " @-moz-keyframes anim" + imgclass + " { " + rotate + "}"; webkitframe = " @-webkit-keyframes anim" + imgclass + " { " + rotate + "}"; $('<style> '+ frame + mozframe + webkitframe + ' .img'+imgclass+' { animation: anim'+imgclass+' 3s ease 0s infinite alternate;' + '-moz-animation: anim'+imgclass+' 3s ease 0s infinite alternate;' + '-webkit-animation: anim'+imgclass+' 3s ease 0s infinite alternate; }' +'</style>').appendTo('head'); deg = deg + stat; }); }); </script> <style> body { background: #fff url('wood_pattern.png') repeat top right; } .content { margin: 0 auto; padding: 100px; } img { margin: 10px; padding: 20px; background: #fff; -moz-box-shadow: 0px 0px 3px #d3d3d3; -webkit-box-shadow: 0px 0px 3px #d3d3d3; box-shadow: 0px 0px 3px #d3d3d3; position: absolute; } </style> </head> <body> <div class="content"> <div class="img_c"><img class="img1" src="img/01.jpg"/></div> <div class="img_c"><img class="img2" src="img/02.jpg"/></div> <div class="img_c"><img class="img3" src="img/03.jpg"/></div> <div class="img_c"><img class="img4" src="img/04.jpg"/></div> <div class="img_c"><img class="img5" src="img/05.jpg"/></div> <div class="img_c"><img class="img6" src="img/06.jpg"/></div> <div class="img_c"><img class="img7" src="img/07.jpg"/></div> <div class="img_c"><img class="img8" src="img/07.jpg"/></div> <div class="img_c"><img class="img9" src="img/09.jpg"/></div> <div class="img_c"><img class="img10" src="img/09.jpg"/></div> </div> </body> </html> |
Как вы заметили код достаточно прост. В результате чего мы получаем веерную анимацию вращающихся изображений на 360 градусов за 3 секунды в одну сторону, потом в другую.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Интересно:
| Опубликовал admin 25.09.2012 в 18:44, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...