css3 花瓣飘落 |3号仿宋体字 css写法

/* 定义花瓣 */
.petal {
position: absolute;
z-index: -1;
border-radius: 50%;
background: #FFD9E6;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}
/* 定义花瓣飘动动画 */
@keyframes petal-fall {
0% {
transform: translateY(-10%) rotate(0deg);
}
100% {
transform: translateY(180%) rotate(360deg);
}
}
/* 定义花瓣飘落效果 */
.petal-fall {
animation-name: petal-fall;
animation-duration: 10s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
/* 在网页上出现花瓣 */
for (var i = 0; i< 20; i++) {
var petal = document.createElement('div');
petal.className = 'petal petal-fall';
petal.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
petal.style.animationDelay = Math.floor(Math.random() * 10) + 's';
document.body.appendChild(petal);
}

上面的代码定义了花瓣的样式和动画效果，以及在网页上出现花瓣的逻辑。大家通过生成一个div元素，添加相应的CSS类名和样式，就可以实现花瓣飘动效果。

至此，大家就能够在网页上看到美丽的花瓣飘落了。当然，如果需要自定义花瓣的样式，只需要修改相关的CSS属性即可。这样，大家能够为自己的网页增添更多想象力和创意，让用户感受到更多的美好和趣味。