Красивый покачивающийся цветочек на CSS

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

Посмотрите сам цветочек у меня на этом блоге.

Скпируйте приведённый ниже код.

<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 марта. 

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email