Четверг, 18 Октября 2012 15:30

Делаем снег при помощи -webkit-animation

Written by 
Оцени эту запись
(4 Голоса)

В данной статье я приведу пример того, как без особых усилий и на чистом CSS сделать снег - летящие снежинки. Работает только в WebKit браузерах. Используется  -webkit-animation, а в ней -webkit-transform. 

 

 

Смотрим демо:

 

 

Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж

 

 

А теперь приведу код полностью:

 

 

<style>
        @-webkit-keyframes 'fade' {
            from {
            opacity: 1;
            }
            95% {
            opacity: 1;
            }
            to {
            opacity: 0;
            }
        }
        @-webkit-keyframes 'fall' {
            from {
            -webkit-transform: translate(0px, -20px) scale(0.5,0.7);
            }
            to {
            -webkit-transform: translate(50px, 570px) scale(0.7,0.5);
            }
        }
        @-webkit-keyframes 'rotate' {
            from   {
            -webkit-transform: rotate(-60deg);
            color: #fff;
            }
            to {
            -webkit-transform: rotate(60deg);
            color: #eee;
            }
        }
 
        .wrapper_fall {
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-align: center;
            -webkit-user-select: none;
            width: 600px;
            height: 500px;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
            -webkit-border-radius: 10px;
            border: 10px solid #736AFF;
            -webkit-box-sizing: content-box;
            background: #00008b;
        }
        .inner_fall {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-box-align: center;
            -webkit-user-select: none;
            height: 500px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .item {
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-align: center;
            -webkit-user-select: none;
            width: 30px;
            height: 30px;
            top: -50px;
            position: absolute;
 
        }
        .item span {
            -webkit-animation: 'rotate' ease-in 0s infinite alternate;
            color: #fff;
            font-size: 12px;
            font-weight: bold;
            font-family: Arial;
            display: -webkit-box;
            text-transform: lowercase;
            -webkit-transform-origin: 70% -100%;
            position: absolute;
            width: 30px;
            height: 30px;
        }
        .item:nth-child(1) {
            left: 20px;
            -webkit-animation: 'fall' 80s infinite normal, 'fade' 80s infinite normal;
        }
        .item:nth-child(2) {
            left: 200px;
            -webkit-animation: 'fall' 99s infinite normal, 'fade' 99s infinite normal;
        }
        .item:nth-child(3) {
            left: 80px;
            -webkit-animation: 'fall' 107s infinite normal, 'fade' 107s infinite normal;
        }
        .item:nth-child(4) {
            left: 350px;
            -webkit-animation: 'fall' 55s infinite normal, 'fade' 55s infinite normal;
        }
        .item:nth-child(5) {
            left: 40px;
            -webkit-animation: 'fall' 34s infinite normal, 'fade' 34s infinite normal;
        }
        .item:nth-child(6) {
            left: 65px;
            -webkit-animation: 'fall' 92s infinite normal, 'fade' 92s infinite normal;
        }
        .item:nth-child(7) {
            left: 520px;
            -webkit-animation: 'fall' 135s infinite normal, 'fade' 135s infinite normal;
        }
        .item:nth-child(8) {
            left: 230px;
            -webkit-animation: 'fall' 88s infinite normal, 'fade' 88s infinite normal;
        }
        .item:nth-child(9) {
            left: 390px;
            -webkit-animation: 'fall' 606s infinite normal, 'fade' 606s infinite normal;
        }
        .item:nth-child(10) {
            left: 550px;
            -webkit-animation: 'fall' 273s infinite normal, 'fade' 273s infinite normal;
        }
        .item:nth-child(11) {
            left: 420px;
            -webkit-animation: 'fall' 300s infinite normal, 'fade' 300s infinite normal;
        }
        .item:nth-child(12) {
            left: 280px;
            -webkit-animation: 'fall' 72s infinite normal, 'fade' 72s infinite normal;
        }
        .item:nth-child(13) {
            left: 80px;
            -webkit-animation: 'fall' 204s infinite normal, 'fade' 204s infinite normal;
        }
        .item:nth-child(14) {
            left: 200px;
            -webkit-animation: 'fall' 305s infinite normal, 'fade' 305s infinite normal;
        }
        .item:nth-child(15) {
            left: 320px;
            -webkit-animation: 'fall' 86s infinite normal, 'fade' 86s infinite normal;
        }
        .item:nth-child(16) {
            left: 60px;
            -webkit-animation: 'fall' 350s infinite normal, 'fade' 350s infinite normal;
        }
        .item:nth-child(17) {
            left: 500px;
            -webkit-animation: 'fall' 141s infinite normal, 'fade' 141s infinite normal;
        }
        .item:nth-child(18) {
            left: 10px;
            -webkit-animation: 'fall' 307s infinite normal, 'fade' 307s infinite normal;
        }
        .item:nth-child(19) {
            left: 90px;
            -webkit-animation: 'fall' 176s infinite normal, 'fade' 376s infinite normal;
        }
        .item:nth-child(20) {
            left: 370px;
            -webkit-animation: 'fall' 33s infinite normal, 'fade' 33s infinite normal;
        }
        .item:nth-child(21) {
            left: 120px;
            -webkit-animation: 'fall' 45s infinite normal, 'fade' 45s infinite normal;
        }
        .item:nth-child(22) {
            left: 20px;
            -webkit-animation: 'fall' 67s infinite normal, 'fade' 67s infinite normal;
        }
        .item:nth-child(23) {
            left: 480px;
            -webkit-animation: 'fall' 79s infinite normal, 'fade' 79s infinite normal;
        }
        .item:nth-child(24) {
            left: 270px;
            -webkit-animation: 'fall' 164s infinite normal, 'fade' 164s infinite normal;
        }
        .item:nth-child(25) {
            left: 410px;
            -webkit-animation: 'fall' 38s infinite normal, 'fade' 38s infinite normal;
        }
        .item:nth-child(26) {
            left: 460px;
            -webkit-animation: 'fall' 207s infinite normal, 'fade' 207s infinite normal;
        }
        .item:nth-child(27) {
            left: 300px;
            -webkit-animation: 'fall' 581s infinite normal, 'fade' 581s infinite normal;
        }
        .item:nth-child(28) {
            left: 200px;
            -webkit-animation: 'fall' 548s infinite normal, 'fade' 548s infinite normal;
        }
        .item:nth-child(29) {
            left: 190px;
            -webkit-animation: 'fall' 56s infinite normal, 'fade' 56s infinite normal;
        }
        .item:nth-child(30) {
            left: 250px;
            -webkit-animation: 'fall' 243s infinite normal, 'fade' 243s infinite normal;
        }
        .item:nth-child(31) {
            left: 200px;
            -webkit-animation: 'fall' 408s infinite normal, 'fade' 408s infinite normal;
        }
        .item:nth-child(32) {
            left: 390px;
            -webkit-animation: 'fall' 456s infinite normal, 'fade' 456s infinite normal;
        }
        .item:nth-child(32) {
            left: 500px;
            -webkit-animation: 'fall' 480s infinite normal, 'fade' 480s infinite normal;
        }
    </style>
<div class="wrapper_fall">
        <div class="inner_fall">
            <div class="item"><span style="-webkit-animation-duration: 10s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 8s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 7s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 17s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 6s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 14s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 25s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 8s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 6s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 6s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 7s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 7s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 24s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 11s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 21s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 14s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 25s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 35s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 8s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 11s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 13s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 6s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 13s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 5s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 12s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 14s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 5s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 8s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 10s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 5s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 38s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 10s">Ж</span></div>
            <div class="item"><span style="-webkit-animation-duration: 55s">Ж</span></div>
        </div>
    </div>

 

 

Роль снежинок выполняют маленькие буковки "Ж"))

 

 

 

 

Добавить комментарий


Защитный код
Обновить

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов