让我来为您制作一个精美的红玫瑰特效!
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #000;
overflow: hidden;
}
.rose {
position: relative;
width: 300px;
height: 400px;
transform-style: preserve-3d;
animation: rotate 20s infinite linear;
}
.petal {
position: absolute;
width: 100px;
height: 150px;
background-image: url('https://i.imgur.com/FeNKUy6.png');
background-size: cover;
animation: sway 5s infinite ease-in-out;
}
.petal:nth-child(1) {
transform: translate(-50%, -50%) rotate(0deg) scale(1);
animation-delay: 0s;
}
.petal:nth-child(2) {
transform: translate(-50%, -50%) rotate(72deg) scale(0.9);
animation-delay: 1s;
}
.petal:nth-child(3) {
transform: translate(-50%, -50%) rotate(144deg) scale(0.8);
animation-delay: 2s;
}
.petal:nth-child(4) {
transform: translate(-50%, -50%) rotate(216deg) scale(0.7);
animation-delay: 3s;
}
.petal:nth-child(5) {
transform: translate(-50%, -50%) rotate(288deg) scale(0.6);
animation-delay: 4s;
}
@keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
@keyframes sway {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
50% {
transform: translate(-50%, -45%) rotate(10deg);
}
100% {
transform: translate(-50%, -50%) rotate(0deg);
}
}
查看详情
查看详情