纯CSS添加雪花网站动态背景特效兼容性好!

做好了网站,看的时间长了特别的想要美化下自己的网站,这样不仅对自己而言在维护网站时不太枯燥单调,而且对于网站访客而言也觉得网站比较漂亮美观,提高了客户体验度,于是乎开始寻找各方面的资源,思考解决办法,但无一例外都是需要加载外部JS进行实现,作为一名网站优化人员,实在不愿意加载太多的静态资源,过多的资源带来的只是提高了HTTP请求数,最终导致网站加载过慢,这样得不偿失,理想的办法就是使用纯CSS添加雪花网站动态背景特效,并且还要要求兼容性好,网站建设人员对浏览器的兼容性可谓是深有体会啊!

纯CSS添加雪花网站动态背景特效兼容性好
纯CSS添加雪花网站动态背景特效兼容性好

经过不断测试最终找到了一个理想的解决办法,通过背景图片与浏览器自带属性的完美结合,制作出雪花网站动态背景特效,废话不多说来看方法:

第一步:在</body>前添加一段HTML代码

<div id="snowMask"></div>

第二步:下载两个PNG图片到本地并上传到网站空间

文件信息
文件名:snow.zip
文件大小:1.45KB
下载地址:https://pan.baidu.com/s/10MDZpFP00Uf1lBUl5xc2uQ 
提取密码:yyiq

第三步:将以下CSS样式使用内联或是添加到style.css文件当中

@-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(路径/snow1.png), url(路径/snow2.png);
	-webkit-animation: 10s snow linear infinite;
	animation: 10s snow linear infinite;
	pointer-events: none;
	z-index: 9999;
}

如果你添加了CDN那么请登陆你的CDN控制面板刷新文件网址与CSS网址,否则会因为缓存导致效果失效,另外如果你使用了对象存储功能,则需要对对象存储上的CSS文件进行修改,将图片上传到对象存储上.

经过折腾,终于通过纯CSS添加上了雪花网站动态背景特效,并且经测试,遨游、firefox、chrome、safari等浏览器均可正常显示特效兼容度较好,有兴趣的小伙伴可以给自己的网站添加下,让自己的网站增加些活力与吸引力!

未经允许不得转载:西德SEO » 纯CSS添加雪花网站动态背景特效兼容性好!

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

'); })();