这是效果图,是个动图,
你也可以换成其他图片。
没有限制,改完图片别忘了调一下图片大小,不然影响美观。
css部分,
<style>
body { background-color:lightBlue; }
#snow{
background: none;
font-family: Androgyne;
background-image: url('/corndog-tile-1.png'), url('/corndog-tile.png'), url('/corndog-tile-2.png');
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index:1;
-webkit-animation: snow 1000s linear infinite;
-moz-animation: snow 1000s linear infinite;
-ms-animation: snow 1000s linear infinite;
animation: snow 1000s linear infinite;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 50000px 50000px, 10000px 20000px, -10000px 15000px;}
}
@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 50000px 50000px, 10000px 20000px, -10000px 15000px;}
}
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 50000px 50000px, 10000px 20000px, -10000px 15000px;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 50000px 50000px, 10000px 20000px, -10000px 15000px;}
}
</style>
主题给个div,加个ID就行了。
我的是
<div id="snow">
这个小网页用不到 js,大体都是css基础。
也可以在 HTML/CSS/Javascript在线代码运行工具 | 菜鸟教程 这里运行一下看效果,别忘了加div和ID