玫瑰花html动态代码
@keyframes rotaion {
0% {
transform: rotate(0deg);
}
* {
transform: rotate(360deg);
}
}
@keyframes shadow {
0% {
box-shadow: 0px 0px 10px 0px rgba(0
0
0
0.75);
}
50% {
box-shadow: 0px 0px 10px 10px rgba(0
0
0
0.75);
}
* {
box-shadow: 0px 0px 10px 0px rgba(0
0
0
0.75);
}
}
.container {
position: relative;
width: 300px;
height: 400px;
margin: 0 auto;
}
.rose {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%
-50%);
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
animation: rotaion 10s infinite linear;
}
.shadow {
position: absolute;
top: 70%;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 20px;
background-color: black;
border-radius: 50%;
animation: shadow 2s infinite linear;
}