Новорічна анімована шапка на css3

Новорічна анімована шапка на CSS3

До нового року залишилося менше двох місяців, і я вважаю що вже необхідно готувати ваші сайти в цій події. А почнемо ми підготовку з шапки сайту, і в цьому уроці ми створимо анімовану новорічну шапку на CSS3.

Приклад анімації можна побачити тут:

Подивитися прімерСкачать

Ви, напевно, вже знаєте як створюється анімація на CSS3. Вона створюється за допомогою правила @keyframes. Але в уроці ми не будемо використовувати префікси (-webkit, -moz, -ms), щоб не писати багато коду.

HTML частина

Структура документа проста:

1234567891011
lt;div class="Header"gt;lt;div class="Wrapper"gt;lt;div class="Christmas-tree tree1"gt; lt;/divgt;lt;div class="Christmas-tree tree2"gt; lt;/divgt;lt;div class="Christmas-tree tree3"gt; lt;/divgt;lt;div class="Snowman"gt; lt;/divgt;lt;div class="Christmas-tree tree4"gt; lt;/divgt;lt;div class="Christmas-tree tree5"gt; lt;/divgt;lt;div class="Christmas-tree tree6"gt; lt;/divgt;lt;/divgt;lt;/divgt;

Необхідні зображення:

ялинка небо сніг

Той, хто йде сніг, але його тут не видно # 128578;

Сніговик сніг фон

CSS частина

Для того щоб була анімація йде снігу необхідно змінювати значення властивості background-position:

123456789101112131415
.header {margin: 0 0 30px-background: url(../images/header-bg.jpg)-background: url(../images/snow-bg.jpg) repeat-y center, url(../images/header-bg.jpg)--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 буде містити фон, а також ялинки зі сніговиком:

12345678
.wrapper {width: 960px-height: 315px-margin: auto-overflow: hidden-position: relative-background: url(../images/wrapper-bg.jpg) no-repeat bottom-}

Потім ялинки з`являються не одночасно, що й створює такий гарний ефект:

Відео: HTML верстка на прикладі бізнес сайту: Урок 5 (шапка і верхнє меню)

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
@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.jpg)-}.snowman {width: 115px-height: 103px-top: 195px-left: 415px-background: url(../images/snowman.jpg)--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+.

висновок

Дійсно приголомшливий ефект. Ближче до нового року можна буде встановлювати :).

Відео: Speed Art I НОВОРІЧНА ШАПКА ДЛЯ КАНАЛУ! + Мініподкаст = 3

Успіхів!

джерело: red-team-design.com

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!