css漂浮雪花 |css3 冒泡动画

/* CSS样式代码 */
body {
background-color: #51B3D6; /* 设置背景颜色：浅蓝色 */
}
/* 定义一个雪花类 */
.snowflake {
position: absolute; /* 设置绝对定位 */
top: 0; /* 定义顶部为0 */
width: 10px; /* 定义雪花宽度 */
height: 10px; /* 定义雪花高度 */
border-radius: 50%; /* 设置圆角 */
background-color: white; /* 设置雪花颜色为白色 */
box-shadow: 0 0 5px white /* 添加白色阴影 */
animation: snow 5s ease infinite; /* 添加雪花飘落的动画 */
}
/* 定义雪花飘落动画 */
@keyframes snow {
0% {
transform: translateY(-50px); /* 起始位置：往上50px */
}
100% {
transform: translateY(1000px); /* 结束位置：往下1000px */
}
}

上述CSS代码中，大家定义了一个雪花类，其中设置了其位置、大小、形状、颜色等属性，并通过定义动画，使得雪花可以在页面中无限循环地飘落。

在HTML代码中，大家可以通过添加“div”标签并指定“snowflake”类，来实现将雪花添加到页面中：

这样，大家就完成了利用CSS实现漂浮雪花的效果，让网页更加丰富有趣。