CSS:下雪的冬天

这种效果是在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下雪;请参见虾咪填海技术交流中心效果(该效果仅在冬天时分展现)。

下载演示文件

人已赞赏
设计园地

网站使用 rel="noopener" 打开外部锚

2018-7-4 11:55:40

设计园地

网页设计风格指南,其应包含哪些信息?

2018-7-27 23:49:23

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索