圣诞节来了，雪花纷飞的CSS3动画，还不首页用起来

圣诞节来了，冬天来了，怎么可以没有雪花纷飞效果，昨天下班前折腾了一会儿，弄了个雪花纷飞的实例，有兴趣的可以交流分享下。

 

原文链接：http://www.html5think.com/article/index/id/80

 

CSS3代码节选：

.main:before{
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    z-index: 1;
    -webkit-background-size: 10rem 10rem;
    -moz-background-size: 10rem 10rem;
    background-size: 10rem 10rem;
    background-image: url(./images/snow2.png);
    -webkit-animation: "snow" 28s linear infinite;
    -moz-animation: "snow" 28s linear infinite;
    -o-animation: "snow" 28s linear infinite;
    -ms-animation: "snow" 28s linear infinite;
}

.main:after{
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    z-index: 10;
    -webkit-background-size: 10rem 10rem;
    -moz-background-size: 10rem 10rem;
    background-size: 10rem 10rem;
    background-image: url(./images/snow1.png);
    -webkit-animation: "snow" 18s linear infinite;
    -moz-animation: "snow" 18s linear infinite;
    -o-animation: "snow" 18s linear infinite;
    -ms-animation: "snow" 18s linear infinite;
    animation: "snow" 18s linear infinite;
}

@-moz-keyframes snow{
    0%{
    background-position-x:0;
    background-position-y:0;
    }
    50%{
    background-position-y:20rem;
    }
    100%{
    background-position-x:20rem;
    background-position-y:40rem;
    }
}

@-webkit-keyframes snow{
    0%{
    background-position-x:0;
    background-position-y:0;
    }
    50%{
    background-position-y:20rem;
    }
    100%{
    background-position-x:20rem;
    background-position-y:40rem;
    }
}

@-o-keyframes snow{
    0%{
    background-position-x:0;
    background-position-y:0;
    }
    50%{
    background-position-y:20rem;
    }
    100%{
    background-position-x:20rem;
    background-position-y:40rem;
    }
}

@keyframes snow{
    0%{
    background-position-x:0;
    background-position-y:0;
    }
    50%{
    background-position-y:20rem;
    }
    100%{
    background-position-x:20rem;
    background-position-y:40rem;
    }
}

 

转载于:https://www.cnblogs.com/cxycs/p/6201436.html