css3雪花动画效果 |logo特效css

/*定义关键帧*/
@keyframes snowfall {
from {
margin-top: -100px;
}
to {
margin-top: 100%;
}
}
/*定义样式*/
.snowflake {
display: block;
position: absolute;
top: -100px;
font-size: 2em;
width: 1em;
height: 1em;
color: #fff;
text-shadow: 0 0 5px #fff;
animation: snowfall 5s linear infinite;
}
/*在HTML页面中插入雪花*/
<div class="snowflake">×</div>

在上面的代码中，首先定义了关键帧 snowfall ，从顶端开始，不断地向下移动，直到底部。而 snowflake 表示雪花的样式，包括其大小、颜色、位置和阴影等属性，采用动画效果使其飘落。在HTML页面中，只需要插入一个 snowflake 即可实现雪花的效果。

总之，通过使用CSS3在网页中添加雪花效果，可以让页面更加生动有趣，为用户带来更加良好的视觉体验。