Качающийся рождественский венок

Доброго дня, читатель!
Сегодня, по традиции, перед Новым годом и Рождеством начинаю статьи об украшении сайта. Позвольте напомнить о предыдущих статьях о декорировании блога на праздник.
Блеск на изображении и фонах
Как украсить Blogger к празднику
Снежинки CSS на сайт
Декор для Нового года на Blogger - гирлянды
Сегодня на основе кода, который гуляет в интернете давно и встречается у многих блогеров, хочу предложить украсить блог рождественским венком.

Код украшения

Выглядеть будет украшение так:

Код венка:

<div dir="ltr" style="text-align: left;" trbidi="on">
<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>

Венок можно поставить в статью или в боковую панель Дизайн - Добавить гаджет - HTML/JavaScript.
Пробежимся по настройкам:
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">
<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>

Картинку выбираем любую на прозрачном фоне. С настройками трансформации нужно будет поработать, я в примере картинки с сердцем их уменьшила пополам: вместо 0.5 выставила значение 0.2, вместо 1.5 установила 0.5. Так же можно уменьшить скорость биения, в примере я изменила 1s на 2s.
Можно сделать бьющееся сердце без картинки, только на сss, уроки можно посмотреть на многих сайтах например:
http://zornet.ru/forum/123-6695-1
https://totaku.ru/kak-sdielat-biushchieiesia-sierdtsie-na-chistom-css/