css满屏花瓣

CSS满屏花瓣效果实现方法

body {
background: #111;
}
.petal {
position: absolute; /* 相对定位 */
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%; /* 圆形 */
animation: floating 2s ease-in-out infinite; /* 浮动动画 */
}
/* 生成伪元素表示花瓣 */
.petal:before, .petal:after {
content: "";
position: absolute; /* 相对定位 */
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%; /* 圆形 */
animation: floating 2s ease-in-out infinite; /* 浮动动画 */
}
/* 第一个伪元素：顶部 */
.petal:before {
top: -10px;
left: 0;
}
/* 第二个伪元素：右侧 */
.petal:after {
top: 0;
left: 10px;
}
/* 弹跳动画 */
@keyframes floating {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}

这是一段用CSS实现的满屏花瓣效果代码，通过相对定位以及浮动动画实现了花瓣的飘动，使页面看起来更加生动。此外，该代码中使用伪元素来表示花瓣，通过:before和:after属性分别控制花瓣的位置和方向。此外，通过弹跳动画使花瓣的运动更加自然，效果更加出众。

查看更多关于css满屏花瓣的详细内容...