Анимиран сняг с CSS

Анимиран сняг с CSS3

Въпреки че поставете анимиран сняг на страницабило то от нас или от клиент, звучи като дизайнерска практика, по-стара от всичко друго, истината е, че анимация което представяме по този повод е морето на елегантното. Също така не ви е необходим JavaScript, това е просто CSS3.

Първото нещо е да погледнете анимацията.

Изглежда доста добре, нали? За да го приложим на практика, трябва само да създадем три изображения с бели точки и да ги анимираме с помощта на свойството @ключови кадри на CSS3, както следва:

/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

Добавяне на различното префикси за различни браузъри, след което установяваме за нашето тяло:

body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}

Също така добавяне на необходимите префикси. Пълната процедура с подробни обяснения, предоставени от Джошуа Джонсън, можете да намерите в неговия блог.

Повече информация - CSS3 Gradient Generator, CSS3 Gradient Generator
Източник - Дизайнерска шапка


Оставете вашия коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

*

*

  1. Отговорен за данните: Мигел Анхел Гатон
  2. Предназначение на данните: Контрол на СПАМ, управление на коментари.
  3. Легитимация: Вашето съгласие
  4. Съобщаване на данните: Данните няма да бъдат съобщени на трети страни, освен по законово задължение.
  5. Съхранение на данни: База данни, хоствана от Occentus Networks (ЕС)
  6. Права: По всяко време можете да ограничите, възстановите и изтриете информацията си.