css3 飘雪的日子

前端入坑纪 54

用bing搜索的时候，看到它的雪花效果，那就地仿照一个咯~

好，详解如下！

OK，first things first！ github项目地址

圣诞临近啦

HTML 结构

    <div class="snowWrp">
        <div class="snow snow1"></div>
        <div class="snow snow2"></div>
        <div class="snow snow3"></div>
        <div class="snow snow4"></div>
    </div>

这么多class为snow的div，都是为了设置雪花背景和动画用的

CSS 结构

        body{
            background-color:black;
        }
        .snowWrp{
            position: fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
        }
        .snow {
            position: absolute;
            top:-100%;
            left:0;
            height: 100%;
            width:100%;
            background-image:url(wrap/img/snow.png);
            animation: falling 50s linear infinite;
        }
        .snow1 {
            background-position:10% 20%;
        }
        .snow2 {
            background-position:20% 60%;
            opacity: .5;
        }
        .snow3 {
            background-position:60% 50%;
            opacity: .5;
        }
        .snow4 {
            background-position:30% 10%;
        }
        .snow1 {
            animation-delay:10s;
        } 

        .snow2 {
            animation-delay:20s;
        } 
        .snow3 {
            animation-delay:30s;
        } 

        @keyframes falling{
            0%{
                top:-100%;
                opacity: 0;
            }
            1%{
                opacity: 1;
            }
            99%{
                opacity: 1;
            }
            100%{                
                top:100%;
                opacity: 0;
            }
        }

1. div.snowWrp fixed布局，撑满整个屏幕。这样之后那些div.snow，在height:100%,width:100%就可以获得宽高
2. 每个div.snow 的 background-position的值都不一样，这样平铺后显示的效果会不一样
3. 每个div.snow 的动画延时也不一样，这样动起来后，不会让屏幕空出一大块没有雪花
4. 每个div.snow 的动画的开始和结束时，一定要设置opacity:0。这样它们动画往返的时候，才不会被看出来

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！

打开支付宝首页搜 625097528 领红包，领到大红包的小伙伴赶紧使用哦！

支持你我，扫一扫红包