html图片模糊效果渐变,CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集...

前言

首先第一步，先布局html代码如下：

天赐神功

上面一看第一个图片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 */

}

我们逐步来分析下这个代码：

首先一般的CSS3 blur滤镜实现代码如下：

.blur {

-webkit-filter: blur(10px); /* Chrome, Opera */

-moz-filter: blur(10px);

-ms-filter: blur(10px);

filter: blur(10px);

}

SVG滤镜实现：

不管倒腾什么方法，搞一个代码如下，且全名为blur.svg的SVG文件：

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标签的代码就是添加的滤镜代码。

如下CSS调用代码：

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

然后，效果就出来了。如果你手上的浏览器是FireFox25-就能看到效果。

IE10以及IE11以及以后的IE11+都是支持SVG的滤镜的，但是，此demo在这些浏览器下是无效的，为何？

好像因为其不支持直接在CSS使用使用filter: url的写法，其实，要想实现IE10, IE11下的模糊效果，也是可以，就是适用性差了点，图片要写入SVG代码，类似下面：

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">

然后，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: -100% 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%。让背景图片大小水平方向扩大一倍，这样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;的设置。

最终效果如图所示：

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持!