htmlcss实现雪花效果图,CSS3如何实现雪花飘落的效果
通过CSS3中的animation属性来设置动画名称，动画时间、速度以及动画是否循环播放来实现雪花飘落的效果
今天将要分享的是利⽤CSS3中的animation属性来实现雪花飘落的效果，具有⼀定的参考效果，希望对⼤家有所帮助。
【推荐课程：CSS3教程】
制作背景图⽚
我们可以利⽤电脑中的画图软件，绘画上你想绘制的图案，⽐如像⼩星星，雪花，爱⼼等等。本例中在画布上绘制⼀个⿊⾊的背景然后再画上雪花
html图片展示特效程序思路：
⾸先给body加⼀个与图⽚背景颜⾊⼀样的颜⾊，然后通过position：fixed⽣成绝对定位的元素，相对于浏览器窗⼝进⾏定位，然后再将其设置上下左右值都为0，⽬的是让图⽚紧密贴合在⼀起，最后利⽤animation属性设置动画效果
我们可以根据⾃⼰想要的动画效果来设置动画，⽐如在本例中：
设置动画名称为xuehua，动画完成的时间为15s，动画的速度为从开始到结束的速度⼀致，动画⼀直⽆线循环播放animation: xuehua 15s linear infinite;
程序代码
body{
background: #000;
}
#xuehua{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: url('images/xuehua.png');
-webkit-animation: xuehua15s linear infinite;
animation: snow 15s linear infinite;
}
@keyframes xuehua{
0% {
background-position: 0 0, 0 0;
}
100% {
background-position: 500px 1000px, 500px 500px;
}
}
@-webkit-keyframes xuehua{
0% {
background-position: 0 0, 0 0;
}
100% {
background-position: 500px 1000px, 500px 500px;
}
}
效果图如下：
总结：以上就是本篇⽂章的全部内容，希望通过这篇⽂章⼤家可以学会制作雪花飘落的特效。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。