Качающийся рождественский венок
Сегодня, по традиции, перед Новым годом и Рождеством начинаю статьи об украшении сайта. Позвольте напомнить о предыдущих статьях о декорировании блога на праздник.
Блеск на изображении и фонах
Как украсить Blogger к празднику
Снежинки CSS на сайт
Декор для Нового года на Blogger - гирлянды
Сегодня на основе кода, который гуляет в интернете давно и встречается у многих блогеров, хочу предложить украсить блог рождественским венком.
Код украшения
Выглядеть будет украшение так:
<div dir="ltr" style="text-align: left;" trbidi="on">Венок можно поставить в статью или в боковую панель Дизайн - Добавить гаджет - HTML/JavaScript.
<style type="text/css">
.st {
width:250px;
-webkit-animation: ring 68s 9s ease-in-out infinite;
-webkit-transform-origin: 50% 14px;
-moz-animation: ring 68s 9s ease-in-out infinite;
-moz-transform-origin: 50% 14px;
animation: ring 68s 9s ease-in-out infinite;
transform-origin: 50% 14px;
}
@-webkit-keyframes ring {
0% { -webkit-transform: rotateZ(0); }
1% { -webkit-transform: rotateZ(30deg); }
3% { -webkit-transform: rotateZ(-28deg); }
5% { -webkit-transform: rotateZ(34deg); }
7% { -webkit-transform: rotateZ(-32deg); }
9% { -webkit-transform: rotateZ(30deg); }
11% { -webkit-transform: rotateZ(-28deg); }
13% { -webkit-transform: rotateZ(26deg); }
15% { -webkit-transform: rotateZ(-24deg); }
17% { -webkit-transform: rotateZ(22deg); }
19% { -webkit-transform: rotateZ(-20deg); }
21% { -webkit-transform: rotateZ(18deg); }
23% { -webkit-transform: rotateZ(-16deg); }
25% { -webkit-transform: rotateZ(14deg); }
27% { -webkit-transform: rotateZ(-12deg); }
29% { -webkit-transform: rotateZ(10deg); }
31% { -webkit-transform: rotateZ(-8deg); }
33% { -webkit-transform: rotateZ(6deg); }
35% { -webkit-transform: rotateZ(-4deg); }
37% { -webkit-transform: rotateZ(2deg); }
39% { -webkit-transform: rotateZ(-1deg); }
41% { -webkit-transform: rotateZ(1deg); }
43% { -webkit-transform: rotateZ(0); }
100% { -webkit-transform: rotateZ(0); }
}
.st:hover {
width:250px;
margin-bottom:-06px;
}
</style>
<left></left>
<div style="padding: 0px;">
<img class="st" src="ваша картинка" title="описание картинки" /></div>
</div>
Пробежимся по настройкам:
Width: 250px; - меняйте ширину венка на своё значение
Ваша картинка - адрес картинки
Можно менять значения и проценты трансформации, но это на ваш вкус
Картинка венка должна быть формата PNG.
К картинкам можно добавить падающий снег или блестящие искры, сделать их можно на сайте https://www.online-image-editor.com/. На большие картинки добавить анимацию в сервисе не получиться, а вот для небольших веночков такой вариант подойдёт. Самый большой размер для наложения анимации 500 px на 500 px, большие картинки будут урезаны автоматически.
Получится такая картинка:
Исчезающая картинка
Картинку можно ставить любую на ваш вкус.
<div id="elka">И последний эффект подходит скорее для дня Святого Валентина.
<img src="ваша картинка" />
</div>
<style>
#elka img{
animation-name: elka;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes elka {
0% {opacity: 0}
50%{opacity:1;}
100%{opacity:0;}
}</style>
Бьющееся сердце
<div id="god">Картинку выбираем любую на прозрачном фоне. С настройками трансформации нужно будет поработать, я в примере картинки с сердцем их уменьшила пополам: вместо 0.5 выставила значение 0.2, вместо 1.5 установила 0.5. Так же можно уменьшить скорость биения, в примере я изменила 1s на 2s.
<img src="ваша картинка" />
</div>
<style>
#god img{
animation-name: god;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes god {
0% {transform:scale(0.5);
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-o-transform:scale(0.5);}
50%{transform:scale(1.5);
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);}
100%{transform:scale(0.5);
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-o-transform:scale(0.5);}
}</style>
Можно сделать бьющееся сердце без картинки, только на сss, уроки можно посмотреть на многих сайтах например:
http://zornet.ru/forum/123-6695-1
https://totaku.ru/kak-sdielat-biushchieiesia-sierdtsie-na-chistom-css/
Комментарии со спамом удаляются.