Готовимся к приходу осени: создание падающих листьев с использованием CSS

23 августа 2016 | Опубликовано в css | 1 Комментарий »

Следом за жарким летом придет ветреная осень, так что уже сейчас пора учиться создавать анимацию CSS3 падающих листьев. Изображения листьев в формате PNG с прозрачными областями и 16 битным цветом, чтобы сократить размер файла, анимируются с помощью последовательности ключевых кадров CSS. Еще использованы трехмерные трансформаций CSS, чтобы поворачивать листья во время падения.

Посмотрите демонстрацию анимации падающих листьев:

Еще мы хотели посмотреть, как отработает фильтр падения тени, подробней о котором можно прочитать в этом уроке, насколько тень будет естественно выглядеть у поворачивающихся листьев. Сам эффект формирования тени под падающими листьями выглядит очень красиво, но поддерживается не всеми браузерами, на момент перевода урока он нормально выглядит только в современной версии браузера Firefox, причем в поддерживающих фильтр падения тени браузерах, которым нужна приставка производителя -webkit-, таких как Chrome и Opera, возникают артефакты визуализации, которых не было в более ранних версиях этих браузеров и которые можно увидеть в этом примере.

Код CSS состоит из двух последовательностей ключевых кадров, вариации в вызове которых и начальные состояния разных листьев, заданные в коде HTML, создают разнообразие анимации. Код приведен без приставок производителей, которые в этом случае почти нигде и не понадобятся для большинства современных версий браузеров:

@keyframes sway { 
        0% {
                transform: rotateZ(-15deg) rotateX(55deg);
        }
    30% {
                transform: rotateZ(20deg) rotateX(60deg);
                animation-timing-function: ease-in-out;
        }
        60% {
                transform: rotateZ(-20deg) rotateX(55deg);
                animation-timing-function: ease-in-out;
        }
    100% {
                transform: rotateZ(0deg) rotateX(58deg);
                animation-timing-function: cubic-bezier(0.990, 0.000, 0.890, 0.435);
                }
}
@keyframes fall { 
        60% {
                filter: drop-shadow(0px 60px 40px rgba(0,0,0,0));
        }
        100% {
                margin-top: 500px;
                filter: drop-shadow(0px 5px 8px rgba(0,0,0,0.6));
        }
}
div#autumn-container {
        width: 768px;
        height: 400px;
        border: 1px solid #000;
        overflow: hidden;
        position: relative;
        perspective: 1800px;
        }
img[alt="autumn leaf"] {
        position: absolute;
        width: 33%;
        transform-origin: 0px -400px 0px;
        animation-name: fall, sway;
        animation-duration: 7s, 8s;
        animation-fill-mode: both;
        animation-timing-function: linear, ease-in-out;
}

Код HTML с заданными в нем стилями:

<div id="autumn-container">
        <img src="leaf.png" alt="autumn leaf" style="top: -60px;">
        <img src="leaf2.png" alt="autumn leaf" style="top: -45px; left: 300px; animation-delay: 2s;">
        <img src="leaf4.png" alt="autumn leaf" style="width: 28%; top: -122px; left: 110px; animation-delay: 3.2s;">
        <img src="leaf5.png" alt="autumn leaf" style="width: 35%; top: -55px; left: 198px; animation-delay: 4.4s;">
        <img src="leaf7.png" alt="autumn leaf" style="width: 38%; top: -18px; left: 560px; animation-delay: 2.25s;">
        <img src="leaf6.png" alt="autumn leaf" style="width: 33%; top: 0px; left: 401px; animation-delay: 3.8s;">
</div>

Эту анимацию можно улучшить разными способами. Например, можно использовать JavaScript, чтобы создавать новые листья и траектории их падения случайным образом, при этом сами анимации задаются с помощью объявлений CSS3.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

Опубликовано в css, августа 23, 2016
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Готовимся к приходу осени: создание падающих листьев с использованием CSS

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые