Доброго времени. суток, друзья. В предпраздничные весенние дни не хочу вас утомлять долгой писаниной. Предлагаю вам код анимированного раскачивающегося цветочка. Праздник ведь и весна на носу. Аналогично котикам для блога, которые, как я видела, прижились у многих.

Посмотрите сам цветочек у меня на этом блоге.
Скпируйте приведённый ниже код.
<div class="wrapper">
<div class="plant">
<div class="flower">
<div class="head">
<div class="face"></div>
</div>
</div>
<div class="leaf__one"></div>
<div class="leaf__two"></div>
<div class="leaf__three"></div>
</div>
<div class="pot">
<div class="top"></div>
</div>
</div>
<style>
.wrapper {
height: 200px;
width: 200px;
position: relative;
margin: 65px auto;
z-index: 2;
filter: drop-shadow(0 0 6px #aaa);
}
.wrapper .plant {
height: 100px;
width: 6px;
position: absolute;
left: 0;
right: 0;
bottom: 90px;
margin: auto;
background: #30862D;
z-index: 1;
transform-origin: center bottom;
animation: lean 3s .5s infinite;
}
.wrapper .plant .leaf__one {
height: 30px;
width: 30px;
background: #30862D;
position: relative;
top: 10px;
left: 6px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom-left-radius: 100%;
transform: rotateZ(-67.5deg);
z-index: -2;
}
.wrapper .plant .leaf__two {
height: 26px;
width: 26px;
background: #30862D;
position: relative;
top: 12px;
right: 26px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom-right-radius: 100%;
transform: rotateZ(67.5deg);
}
.wrapper .plant .leaf__three {
height: 24px;
width: 24px;
background: #30862D;
position: relative;
top: 22px;
left: 6px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom-left-radius: 100%;
transform: rotateZ(-67.5deg);
}
.wrapper .plant .flower {
height: 80px;
width: 80px;
position: absolute;
top: -80px;
left: -40px;
animation: rotate 3s .5s infinite;
}
.wrapper .plant .flower::before {
content: "";
height: 40px;
width: 40px;
position: absolute;
top: -30px;
left: 20px;
background: #C2000A;
border-radius: 100%;
z-index: -1;
box-shadow: -37px 15px #C2000A, -47px 54px #C2000A, -26px 89px #C2000A, 15px 93px #C2000A, 43px 63px #C2000A, 36px 21px #C2000A;
}
.wrapper .plant .flower .head {
height: 80px;
width: 80px;
position: absolute;
border-radius: 100%;
background: #E8AD17;
box-shadow: 0 0 3px #333;
z-index: 10;
}
.wrapper .plant .flower .head .face {
height: 26.6666666667px;
width: 26.6666666667px;
position: absolute;
left: 0;
right: 0;
bottom: 10px;
margin: auto;
border: 4px transparent solid;
border-bottom: 4px black solid;
border-right: 4px black solid;
border-radius: 100%;
transform: rotate(45deg);
z-index: 10;
box-sizing: content-box;
}
.wrapper .plant .flower .head .face::before,
.wrapper .plant .flower .head .face::after {
content: "";
height: 10px;
width: 10px;
position: absolute;
top: -10px;
background: black;
border-radius: 100%;
}
.wrapper .plant .flower .head .face::before {
top: 8px;
left: -16px;
}
.wrapper .plant .flower .head .face::after {
top: -16px;
right: 8px;
}
.wrapper .pot {
height: 80px;
width: 60px;
background: #4D2319;
position: absolute;
left: 0;
right: 0;
bottom: 8px;;
margin: auto;
}
.wrapper .pot .top {
height: 20px;
width: 120px;
position: absolute;
left: -30px;
background: #431f16;
z-index: 2;
}
.wrapper .pot .top::after {
content: "";
height: 14px;
width: 120px;
position: absolute;
top: -8px;
left: 0;
border: 0;
border-top: 14px #220F0B solid;
border-radius: 100%;
}
.wrapper .pot::before,
.wrapper .pot::after {
content: "";
position: absolute;
border-color: #4D2319;
border-top-width: 40px;
border-right-width: 15px;
border-bottom-width: 40px;
border-left-width: 15px;
border-style: solid;
border-bottom-color: transparent;
}
.wrapper .pot::before {
left: -30px;
border-left-color: transparent;
}
.wrapper .pot::after {
right: -30px;
border-right-color: transparent;
}
@keyframes lean {
0% {
transform: rotate(0deg);
}
12.5% {
transform: rotate(-22.5deg);
}
25% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
62.5% {
transform: rotate(22.5deg);
}
75% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
12.5% {
transform: rotate(22.5deg);
}
25% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
62.5% {
transform: rotate(-22.5deg);
}
75% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
</style>
Код устанавливается обычно в гаджет HTML/JavaScript в любом месте макета блога. Или в сообщение в режиме HTML.
Поиграйтесь со значениями ширины и высоты - width: 200px; height: 200px; и свойством margin: 65px auto; отступ сверху (больше или меньше, шаблоны разные). Вот и все настройки.
Пусть такой анимированный цветок порадует ваших читателей и подарит праздничное весеннее настроение.
Дорогие женщины, поздравляю вас всех с наступающим праздником весны. Много цветов вам, много улыбок и бесконечно много женского счастья. С праздником 8 марта.
Спасибо, Вика, за чудесный пост! Замечательный цветочек!
ОтветитьУдалитьС наступающим 8 Марта!!! Всех благ тебе и крепкого здоровья!!!
Лена, тебя с праздников. Спасибо за отклик и поздравления.
УдалитьС праздником!
ОтветитьУдалитьБлагодарю, Семён.
УдалитьС праздником!. Шикарный цветочек. Собираю такое)))))
ОтветитьУдалитьLight Knight, бооольшущее спасибо, Вам. Мне очень приятно.
УдалитьВа-у, какой замечательный цветочек! Такой весёленький, игривый. Викуля, спасибо, с праздником! Душевного тепла и отличного настроения.
ОтветитьУдалитьЛюба, взаимно. Душевного тепла для меня сейчас очень важно. Так уж получилось..
Удалить