CSS：下雪的冬天

设计园地
18年7月13日
编辑

虾咪虾咪填海

这种效果是在CSS上进行的，与JavaScript不同，它不会在站点访问者的浏览器上产生更多的资源负载。您可以在任何站点上实施，也可以在CMS（引擎）上。该小技能是我有感而发————深圳太热了，下雪吧！哈哈~~~
先看下演示截图：
CSS：下雪的冬天
好吧，怎么样？这是正常的吗？
实现是最简单的 – 三个图像和一小段的CSS代码。
CSS代码：

* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url('img/snow.png'), url('img/snow3.png'), url('img/snow2.png');
    -webkit-animation: snow 20s linear infinite;
    -moz-animation: snow 20s linear infinite;
    -ms-animation: snow 20s linear infinite;
    animation: snow 20s linear infinite;
}

@keyframes snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-moz-keyframes snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-webkit-keyframes snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-color:#b4cfe0;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px; background-color:#6b92b9;}
}

@-ms-keyframes snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

将此代码添加到您网站的主css文件中。
在代码中，主要是在body类的background-image属性中指定图像的路径。
指定站点上图像的路径。
注：利用jQuery方式实现的下雪效果：局部下雪，全屏幕下雪，Body下雪；请参见虾咪填海技术交流中心效果（该效果仅在冬天时分展现）。

下载演示文件