你的位置:首页 > 网页设计

[网页设计]CSS3动画:流彩文字效果+图片模糊效果+边框伸展效果实现

前言

首先第一步,先布局html代码如下:

<div class="wrap">  <img src="images/1.jpg" class="blur"/>  <div class="text-gradient ">天赐神功</div>  <div class="border"></div></div>

上面一看第一个图片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{  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文件:

<??><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1"   ="http://www.w3.org/2000/svg"   ="http://www.w3.org/1999/xlink"   ="http://www.w3.org/2001/     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代码,类似下面:

<??><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1"   ="http://www.w3.org/2000/svg"   ="http://www.w3.org/1999/xlink"   ="http://www.w3.org/2001/     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 */}

如果还想详细了解可点击《小tip: 使用CSS将图片转换成模糊(毛玻璃)效果》

流彩文字效果

先上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;} }

说明:

  1. 将渐变色设置为文字所在盒的背景色:background-image: linear-gradient(...)
  2. 取文字的形状与背景(长方形)的交集:-webkit-background-clip: text
  3. 删除覆盖在得到交集之上的原文字形状:-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才有移动与变化的空间。

可参考文章:《小tip:CSS3下的渐变文字效果实现》

边框伸展效果

实现边框伸展效果总代码:

.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;的设置。

最终效果如图所示:

百度网盘可下载demo运行查看,下载请点击《CSS3动画:流彩文字效果+图片模糊效果+边框伸展效果实现》