前言
首先第一步，先布局HTML代码如下：
<div class="wrap"> img src="images/1.jpg" class="blur"/> ="text-gradient ">天赐神功</div="border"></> >
上面一看第一个图片img 就是实现图片模糊效果的DOM元素，text-gradient实现的是流彩文字效果的DOM元素，border实现的是边框伸展效果的DOM元素
想一想样式该咋写呢，根据这个布局，我们先来实现图片模糊效果。
图片模糊效果
图片模糊效果要用到的是css3的filter属性，想详细了解可以点击《CSS3 Filter详解（改变模糊度 亮度 透明度等方法）》。
先写下wrap的样式：
.wrap{ position: relative; width:300px; height:225px; text-align: center; }
.blur的样式如下：
.wrap .blur{ absolute; top:0; left: z-index:1; } .wrap:hover img.blur{ transition: all .5s ease; filter: url(blur.svg#blur); /* FireFox,Chrome,Opera */ -webkit-filter: blur(10px); Chrome,1)"> -moz-filter: blur(10px); -ms-filter: filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10,MakeShadow=false); IE6~IE9 */ }
我们逐步来分析下这个代码：
首先一般的CSS3 blur滤镜实现代码如下：
.blur { -webkit-filter: -moz-filter: -ms-filter: filter: blur(10px); }
SVG滤镜实现：
不管倒腾什么方法，搞一个代码如下，且全名为blur.svg的SVG文件：
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" baseProfile="full"> defs> filter id> feGaussianBlur stdDeviation="10" /> filtersvg>
filter: url(blur.svg#blur); */
然后，效果就出来了。如果你手上的浏览器是FireFox25-就能看到效果。
IE10以及IE11以及以后的IE11+都是支持SVG的滤镜的，但是，此demo在这些浏览器下是无效的，为何？
好像因为其不支持直接在CSS使用使用filter: url的写法，其实，要想实现IE10,IE11下的模糊效果，也是可以，就是适用性差了点，图片要写入SVG代码，类似下面：
> image xlink:href="mm1.jpg" x="0" y height="191" width="265" filter="url(#blur)" /> >
然后，SVG作为背景图片载入：
background-image: url(blur.svg); }
这样就可以了。
IE6?-IE9浏览器可以借助IE filter模糊滤镜实现，如下CSS：
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10,MakeShadow=false);
所以最终综合代码：
filter: -webkit-filter: filter: IE6~IE9 */ }
如果还想详细了解可点击《小tip: 使用CSS将图片转换成模糊(毛玻璃)效果》
流彩文字效果
先上css代码：
.wrap:hover .text-gradient { position:2; display: inline-block; color: black; font-size: 30px; -webkit-linear-gradient(left,#147B96,#E6D205 25%,#147B96 50%,#E6D205 75%,#147B96); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; -webkit-animation: masked-animation 4s infinite linear; } @-webkit-keyframes masked-animation { 0% { background-position: 0 0;} 100% { background-position: -100% 0;} }
说明：
- 将渐变色设置为文字所在盒的背景色：
background-image: linear-gradient(...) - 取文字的形状与背景（长方形）的交集：
-webkit-background-clip: text - 删除覆盖在得到交集之上的原文字形状：
-webkit-text-fill-color: transparent
background-clip 属性规定背景的绘制区域。
语法：
值对应于：背景被裁剪到边框盒，内边距框，内容框。@H_905_403@这里用到的text只适用于chrome浏览器。
在经过上述步骤后得到了渐变色填充文字的效果，但实则呈现的是经过裁剪之后的背景，故要实现色彩的流动，则需要背景进行循环地流动，则可使用CSS3 animation循环改变background-position可破之，但在动画效果上有两坑需要注意：
-
background: linear-gradient(...)是多个属性的简写，在@keyframes中修改某项的值请使用具体的属性，否则若使用简写则会覆盖之前的设置。 - 初始设置背景时需要设置
background-size-x>100%。让背景图片大小水平方向扩大一倍，这样background-position才有移动与变化的空间。
边框伸展效果
.border{0; } .border::before,.border::after { content:" "; display: block; position: width: 0; height: Box-sizing: border-Box; transition-property: height,width,left,top; transition-duration: 0.5s; transition-timing-function: ease-in; z-index:2; } .border::before { 100%; left: 50%; } .wrap:hover > .border::before { border: 6px solid #000; border-left-color: border-right-color: transparent; } .border::after { top: .wrap:hover > .border::after { 4px solid #000; border-top-color: border-bottom-color: transparent; }
主要通过border:6px solid #000这个属性，当width和height都设置为100%时，把左右或上下的border设置为transparent就可以实现::after和::before拼装成长方形，两边都是从中间扩展，所以最初left和top设置为50%；最后需要注意 transition-property: height,top;的设置。
最终效果如图所示：
百度网盘可下载demo运行查看，下载请点击《CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现》
原文链接：/html5/994383.html