Анимиран сняг с 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. Права: По всяко време можете да ограничите, възстановите и изтриете информацията си.

bool(вярно)