怎么用CSS3实现雪花飘落的效果

小天博客 • 09/09 10:04 • 程序猿 • 20 views

这篇文章将为大家详细讲解有关怎么用CSS3实现雪花飘落的效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
　　我们可以根据自己想要的动画效果来设置动画，比如在本例中：
　　设置动画名称为xuehua,动免费云主机域名画完成的时间为15s，动画的速度为从开始到结束的速度一致，动画一直无线循环播放
　　animation:xuehua15slinearinfinite;
　　程序代码
　　

　　body{
　　background:#000;
　　}
　　#xuehua{
　　position:fixed;
　　left:0;
　　top:0;
　　right:0;
　　bottom:0;
　　background:url(‘images/xuehua.png’);
　　-webkit-animation:xuehua15slinearinfinite;
　　animation:snow15slinearinfinite;
　　}
　　@keyframesxuehua{
　　0%{
　　background-position:00,00;
　　}
　　100%{
　　background-position:500px1000px,500px500px;
　　}
　　}
　　@-webkit-keyframesxuehua{
　　0%{
　　background-position:00,00;
　　}
　　100%{
　　background-position:500px1000px,500px500px;
　　}
　　}
　　
　　
　　
　　