Октябрь 25, 2019 Запись была обновлена
Новогодняя анимированная шапка на CSS3
До нового года осталось меньше двух месяцев, и я считаю что уже необходимо готовить ваши сайты в этому событию. А начнем мы подготовку с шапки сайта, и в этом уроке мы создадим анимированную новогоднюю шапку на CSS3.
Пример анимации можно увидеть здесь:
Посмотреть примерСкачать
Вы, наверное, уже знаете как создается анимация на CSS3. Она создается с помощью правила @keyframes. Но в уроке мы не будем использовать префиксы(-webkit, -moz, -ms), чтобы не писать много кода.
HTML часть
Структура документа простая:
1 2 3 4 5 6 7 8 9 10 11 | <div class="header"> <div class="wrapper"> <div class="christmas-tree tree1"></div> <div class="christmas-tree tree2"></div> <div class="christmas-tree tree3"></div> <div class="snowman"></div> <div class="christmas-tree tree4"></div> <div class="christmas-tree tree5"></div> <div class="christmas-tree tree6"></div> </div> </div> |
Необходимые изображения:
Идущий снег, но его здесь не видно 🙂 |
CSS часть
Для того чтобы была анимация идущего снега необходимо изменять значение свойства background-position:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .header { margin: 0 0 30px; background: url(../images/header-bg.png); background: url(../images/snow-bg.png) repeat-y center, url(../images/header-bg.png); -webkit-animation: animate-snow 9s linear infinite; -moz-animation: animate-snow 9s linear infinite; -ms-animation: animate-snow 9s linear infinite; animation: animate-snow 9s linear infinite; } @keyframes animate-snow { 0% { background-position: center 0, 0 0;} 100% { background-position: center 885px, 0 0;} } |
А блок с классом wrapper будет содержать фон, а также елки со снеговиком:
1 2 3 4 5 6 7 8 | .wrapper { width: 960px; height: 315px; margin: auto; overflow: hidden; position: relative; background: url(../images/wrapper-bg.png) no-repeat bottom; } |
Затем елки появляются не одновременно, что и создает такой красивый эффект:
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 76 77 78 79 80 81 82 83 84 | @keyframes animate-drop { 0% {opacity:0;transform: translate(0, -315px);} 100% {opacity:1;transform: translate(0, 0);} } .christmas-tree, .snowman { position: absolute; -moz-animation: animate-drop 1s linear; -webkit-animation: animate-drop 1s linear; -ms-animation: animate-drop 1s linear; animation: animate-drop 1s linear; } .christmas-tree { width: 112px; height: 137px; background: url(../images/christmas-tree.png); } .snowman { width: 115px; height: 103px; top: 195px; left: 415px; background: url(../images/snowman.png); -moz-animation-duration: .6s; -webkit-animation-duration: .6s; -ms-animation-duration: .6s; animation-duration: .6s; } .tree1 { top: 165px; left: 35px; -moz-animation-duration: .6s; -webkit-animation-duration: .6s; -ms-animation-duration: .6s; animation-duration: .6s; } .tree2 { left: 185px; top: 175px; -moz-animation-duration: .9s; -webkit-animation-duration: .9s; -ms-animation-duration: .9s; animation-duration: .9s; } .tree3 { left: 340px; top: 125px; -moz-animation-duration: .7s; -webkit-animation-duration: .7s; -ms-animation-duration: .7s; animation-duration: .7s; } .tree4 { left: 555px; top: 155px; -moz-animation-duration: .8s; -webkit-animation-duration: .8s; -ms-animation-duration: .8s; animation-duration: .8s; } .tree5 { left: 710px; top: 170px; -moz-animation-duration: .7s; -webkit-animation-duration: .7s; -ms-animation-duration: .7s; animation-duration: .7s; } .tree6 { left: 855px; top: 125px; -moz-animation-duration: .6s; -webkit-animation-duration: .6s; -ms-animation-duration: .6s; animation-duration: .6s; } |
Браузеры, которые поддерживают данный эффект:Firefox 5+, IE 10+, Chrome 6+, Safari 5+.
Вывод
Действительно потрясающий эффект. Ближе к новому году можно будет устанавливать :).
Успехов!
Источник: red-team-design.com
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Не плохо,но наврятли кто захочет менять свои шапки.Если и будут что ли бо делать то просто дополнять разными фишками на сайте.
Для этого я и опубликовал данный урок. Конечно не хочется менять свой дизайн, но отдельные элементы могут пригодиться.
Спасибо! Я немножко изменила эту шапку.
А можно ли сделать так, чтобы падали не снежинки, а например, цветочки или сердечки?
Здравствуйте. Так сделать можно. Вместо изображения снежинок — snow-bg.png, Вам нужно вставить в таком же виде сердечки или цветочки.
Спасибо! 😎