序言
最先第1步，先合理布局html编码以下：
<div class="wrap">
<img src="images/1.jpg" class="blur"/>
<div class="text-gradient ">天赐神功</div>
<div class="border"></div>
</div>
上面1看第1个照片img 便是完成照片模糊不清实际效果的DOM元素，text-gradient完成的是流彩文本实际效果的DOM元素，border完成的是边框屈伸实际效果的DOM元素
想想款式该咋写呢，依据这个合理布局，大家先来完成照片模糊不清实际效果。
照片模糊不清实际效果
先写下wrap的款式：
.wrap{
position: relative;
width:300px;
height:225px;
text-align: center;
}
.blur的款式以下：
.wrap .blur{
position: absolute;
top:0;
left:0;
width:300px;
height:225px;
z-index:1;
}
.wrap:hover img.blur{
transition: all .5s ease;
filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
-webkit-filter: blur(10px); /* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /*IE6~IE9 */
}
大家逐渐来剖析下这个编码：
最先1般的CSS3 blur滤镜完成编码以下：
.blur {
-webkit-filter: blur(10px); /* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
SVG滤镜完成：
无论捣腾甚么方式，搞1个编码以下，且全名为blur.svg的SVG文档：
<?xml version="1.0" encoding="utf⑻"?>
<!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="blur">
<feGaussianBlur stdDeviation="10" />
</filter>
</defs>
</svg>
上面defs标识的编码便是加上的滤镜编码。
以下CSS启用编码：
filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
随后，实际效果就出来了。假如你手上的访问器是FireFox25-就可以看到实际效果。
IE10和IE11和之后的IE11+全是适用SVG的滤镜的，可是，此demo在这些访问器下是失效的，为什么？
仿佛由于其不适用立即在CSS应用应用filter: url的写法，实际上，要想完成IE10, IE11下的模糊不清实际效果，也是能够，便是可用性差了点，照片要写入SVG编码，相近下面：
<?xml version="1.0" encoding="utf⑻"?>
<!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="blur">
<feGaussianBlur stdDeviation="10" />
</filter>
</defs>
<image xlink:href="mm1.jpg" x="0" y="0" height="191" width="265" filter="url(#blur)" />
</svg>
随后，SVG做为情况照片加载：
.blur {
background-image: url(blur.svg);
}
这样便可以了。
IE6?-IE9访问器能够依靠IE filter模糊不清滤镜完成，以下CSS：
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
因此最后综合性编码：
.blur {
filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
-webkit-filter: blur(10px); /* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
}
流彩文本实际效果
先上css编码：
.wrap:hover .text-gradient {
position: relative;
z-index:2;
display: inline-block;
color: black;
font-size: 30px;
background-image: -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: ⑴00% 0;}
}
表明：
将渐变色色设定为文本所属盒的情况色：background-image: linear-gradient(...)
取文本的样子与情况（长方形）的相交：-webkit-background-clip: text
删掉遮盖在获得相交之上的原文本样子：-webkit-text-fill-color: transparent
background-clip 特性要求情况的绘图地区。
英语的语法：
background-clip: border-box|padding-box|content-box;
值对应于：情况被剪裁到边框盒，内边距框，內容框。
这里用到的text只可用于chrome访问器。
在历经上述流程后获得了渐变色色填充文本的实际效果，但实则展现的是历经剪裁以后的情况，故要完成颜色的流动性，则必须情况开展循环系统地流动性，则可以使用CSS3 animation循环系统更改background-position可破之，但在动漫实际效果上有两坑必须留意：
background: linear-gradient(...)是好几个特性的简写，在@keyframes中改动某项的值请应用实际的特性，不然若应用简写则会遮盖以前的设定。
原始设定情况时必须设定background-size-x>100%。让情况照片尺寸水平方位扩张1倍，这样background-position才有挪动与转变的室内空间。
边框屈伸实际效果
完成边框屈伸实际效果总编码：
.border{
position: absolute;
width:300px;
height:225px;
z-index:2;
top:0;
left:0;
}
.border::before, .border::after {
content:" ";
display: block;
position: absolute;
width: 0;
height: 0;
box-sizing: border-box;
transition-property: height,width,left,top;
transition-duration: 0.5s;
transition-timing-function: ease-in;
z-index:2;
}
.border::before {
height: 100%;
left: 50%;
}
.wrap:hover > .border::before {
left: 0;
width: 100%;
border: 6px solid #000;
border-left-color: transparent;
border-right-color: transparent;
}
.border::after {
width: 100%;
top: 50%;
}
.wrap:hover > .border::after {
height: 100%;
top: 0;
border: 4px solid #000;
border-top-color: transparent;
border-bottom-color: transparent;
}
关键根据border:6px solid #000这个特性，当width和height都设定为100%时，把上下或左右的border设定为transparent便可以完成::after和::before组装发展方形，两侧全是从正中间拓展，因此最开始left和top设定为50%；最终必须留意 transition-property: height,width,left,top;的设定。
最后实际效果如图所示：
以上便是这篇文章内容的所有內容了，期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助~假如有疑惑大伙儿能够留言沟通交流，感谢大伙儿对脚本制作之家的适用!