body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #fff;
margin: 0;
}
.flower {
position: relative;
width: 100px;
height: 100px;
}
.center {
width: 20px;
height: 20px;
background-color: yellow;
border-radius: 50%;
position: absolute;
left: 40px;
top: 40px;
}
.petal {
position: absolute;
width: 60px;
height: 60px;
background-color: pink;
border-radius: 50%;
transform: rotate(45deg);
}
.petal1 {
top: -15px;
left: 10px;
}
.petal2 {
top: 10px;
left: 70px;
}
.petal3 {
top: 70px;
left: 10px;
}
.petal4 {
top: 10px;
left: -15px;
}
@keyframes flowerAnimation {
0% {
transform: translateY(0);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}