HTML代码
放在<body>标签前
1
| <div id="snowMask"></div>
|
CSS代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| @-webkit-keyframes snow { 0% { background-position: 0 0, 0 0 } 100% { background-position: 500px 500px, 1000px 500px } } @keyframes snow { 0% { background-position: 0 0, 0 0 } 100% { background-position: 500px 500px, 1000px 500px } } .container { box-shadow: 0 0 4px 3px rgba(0, 0, 0, .05); } #snowMask { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url(/static/images/snow1.png), url(/static/images/snow2.png); -webkit-animation: 10s snow linear infinite; animation: 10s snow linear infinite; pointer-events: none; z-index: 9999; }
|
雪花图片网盘链接
百度网盘链接:https://pan.baidu.com/s/1A3LP21J-Xf-D_Ol2DQrhbw
提取码:9e1g
PS.
来源:纯CSS添加雪花网站动态背景特效兼容性好!-西德SEO