![](https://static.acgxt.com/old/images/space01.jpg)
![用户头像](https://account-old.acgxt.com/avatar/099bde51435a1a678c17a8ef24d93b56.jpg)
大年30晚上大家是不是被两马的QQ刷一刷,微信摇一摇,支付宝咻一咻给戏弄了呢?是不是没有好好看春晚呢?(反正我都不看的...)?整个大年30夜晚到处都是刷一刷,摇一摇,咻一咻的声音,我连bilibili拜年祭都没怎么好好的看。
最近都快忘了我的网站了.
今天终于有时间了,就来分享一下CSS3模糊效果,知道的朋友请低调~不知道的请努力学习,全程代码简短。
效果如上图,整个效果其实是两张图片,第一张作为背景图片,第二章作为模糊图片
HTML:
<div class="div"> <div class="content"> <img src="image.jpg" class="blur"/> <span class="meta">【七空幻音】CSS3模糊效果</span> </div> </div>
CSS3:
<style> div{ background:url("image.jpg") no-repeat; width:200px; height:180px; margin:50px auto 0; position:relative; } .content{ position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30px; overflow: hidden; } .blur{ position: absolute; width: 100%; bottom: 0; left: 0; -webkit-transform: translateZ(0); transform: translateZ(0); /*主要代码*/ filter: url(blur-5px.svg#blur); -webkit-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); /* FireFox*/ /* IE6~IE9 */ filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false); } .meta{ position: absolute; left: 0; bottom: 0; width: 100%; color:#fff; background-color: rgba(0,0,0,.2); font-size:12px; line-height:30px; } </style>
注意:
效果代码如上,完美支持FF与chrome浏览器,对于IE与edge浏览器貌似并没有什么卵用还有360浏览器7.0版本貌似会意外出现很多横条
下载地址:
5条评论登录后可见