Не бойтесь врагов, бойтесь друзей. Предают друзья, а не враги.
21-января-2024, 20:59 3 0
Красивый движущийся в разные стороны цветок, выполнен при помощи CSS и HTML. Отлично подойдёт для оформления детского сайта или блога о природе, а возможно и для любого другого сайта.
HTML
<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>
CSS
.wrapper {
height: 340px;
width: 300px;
position: relative;
margin: 20px auto;
z-index: 2;
filter: drop-shadow(0 0 6px #aaa);
}
.wrapper .plant {
height: 150px;
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);
}
}