css3写下雪特效 |h5中css属性代码大全

.snowflake {
position: absolute; 
height: 20px; 
width: 20px; 
background: white;
border-radius: 50%; 
box-shadow: inset 0 0 5px #ddd, 0 0 5px #ddd;
animation: snowfall 5s infinite linear;
transform-origin: 50% 50%;
transform: rotate(0deg);
}
@keyframes snowfall {
0% {
transform: translateY(-50px) rotate(0deg);
}
100% {
transform: translateY(800px) rotate(360deg);
}
}

首先，大家给雪花添加一个类名“.snowflake”来进行CSS的样式定义。大家使用了position: absolute来让雪花不受文档流的影响。并通过设定高度和宽度来设置雪花的大小，使用“border-radius: 50%”，将其转化为一个圆形，通过“background:white”来使雪花呈现为白色。

为了让雪花看起来更立体，大家使用“box-shadow”来添加一个投影效果，雪花的投影颜色设置为“#ddd”，以便使其看起来像是晶体一样。

下一步是使用“animation”属性来为雪花添加动画效果。在大家的例子中，大家将其命名为“snowfall”。设定的“animation-duration”可以控制时间，本例中大家为“5s”表示雪花下落时间为5秒，并通过“infinite”来指定动画会无限重复播放。

最后，大家还使用了transform和@keyframes来实现旋转和运动效果。由于大家使用了“transform-origin: 50% 50%”，所以动画的中心是雪花的中心点。在动画中，大家使用“translateY”来设置垂直方向的移动，并通过“rotate”属性来让雪花旋转。

通过以上步骤，您可以获得动态而又有趣的雪花特效，这让您的网站更加吸引人并给网站带来更圣诞气息！