大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

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 领红包,领到大红包的小伙伴赶紧使用哦!
支持你我,扫一扫红包