前言

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

  1. <div class="wrap">
  2. <img src="data:images/1.jpg" class="blur"/>
  3. <div class="text-gradient ">天赐神功</div>
  4. <div class="border"></div>
  5. </div>

上面一看第一个图片img 就是实现图片模糊效果的DOM元素,text-gradient实现的是流彩文字效果的DOM元素,border实现的是边框伸展效果的DOM元素

想一想样式该咋写呢,根据这个布局,我们先来实现图片模糊效果。

图片模糊效果

图片模糊效果要用到的是css3的filter属性,想详细了解可以点击《CSS3 Filter详解(改变模糊度 亮度 透明度等方法)》。

先写下wrap的样式:

  1. .wrap{
  2. position: relative;
  3. width:300px;
  4. height:225px;
  5. text-align: center;
  6. }

.blur的样式如下:

  1. .wrap .blur{
  2. position: absolute;
  3. top:;
  4. left:;
  5. width:300px;
  6. height:225px;
  7. z-index:;
  8. }
  9. .wrap:hover img.blur{
  10. transition: all .5s ease;
  11. filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
  12. -webkit-filter: blur(10px); /* Chrome, Opera */
  13. -moz-filter: blur(10px);
  14. -ms-filter: blur(10px);
  15. filter: blur(10px);
  16. filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /*IE6~IE9 */
  17. }

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

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

  1. .blur {
  2. -webkit-filter: blur(10px); /* Chrome, Opera */
  3. -moz-filter: blur(10px);
  4. -ms-filter: blur(10px);
  5. filter: blur(10px);
  6. }

SVG滤镜实现:

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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  3. <svg version="1.1"
  4. xmlns="http://www.w3.org/2000/svg"
  5. xmlns:xlink="http://www.w3.org/1999/xlink"
  6. xmlns:ev="http://www.w3.org/2001/xml-events"
  7. baseProfile="full">
  8. <defs>
  9. <filter id="blur">
  10. <feGaussianBlur stdDeviation="10" />
  11. </filter>
  12. </defs>
  13. </svg>

上面defs标签的代码就是添加的滤镜代码。

如下CSS调用代码:

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

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

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

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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  3. <svg version="1.1"
  4. xmlns="http://www.w3.org/2000/svg"
  5. xmlns:xlink="http://www.w3.org/1999/xlink"
  6. xmlns:ev="http://www.w3.org/2001/xml-events"
  7. baseProfile="full">
  8. <defs>
  9. <filter id="blur">
  10. <feGaussianBlur stdDeviation="10" />
  11. </filter>
  12. </defs>
  13. <image xlink:href="mm1.jpg" x="0" y="0" height="191" width="265" filter="url(#blur)" />
  14. </svg>

然后,SVG作为背景图片载入:

  1. .blur {
  2. background-image: url(blur.svg);
  3. }

这样就可以了。

IE6?-IE9浏览器可以借助IE filter模糊滤镜实现,如下CSS:

  1. filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);

所以最终综合代码:

  1. .blur {
  2. filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
  3.  
  4. -webkit-filter: blur(10px); /* Chrome, Opera */
  5. -moz-filter: blur(10px);
  6. -ms-filter: blur(10px);
  7. filter: blur(10px);
  8.  
  9. filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
  10. }

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

流彩文字效果

先上css代码:

  1. .wrap:hover .text-gradient {
  2. position: relative;
  3. z-index:;
  4. display: inline-block;
  5. color: black;
  6. font-size: 30px;
  7. background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
  8. -webkit-text-fill-color: transparent;
  9. -webkit-background-clip: text;
  10. -webkit-background-size: 200% 100%;
  11. -webkit-animation: masked-animation 4s infinite linear;
  12. }
  13. @-webkit-keyframes masked-animation {
  14. 0% { background-position: 0 0;}
  15. 100% { background-position: -100% 0;}
  16. }

说明:

  1. 将渐变色设置为文字所在盒的背景色:background-image: linear-gradient(...)
  2. 取文字的形状与背景(长方形)的交集:-webkit-background-clip: text
  3. 删除覆盖在得到交集之上的原文字形状:-webkit-text-fill-color: transparent

background-clip 属性规定背景的绘制区域。

语法:

  1. 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下的渐变文字效果实现》

边框伸展效果

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

  1. .border{
  2. position: absolute;
  3. width:300px;
  4. height:225px;
  5. z-index:;
  6. top:;
  7. left:;
  8. }
  9. .border::before, .border::after {
  10. content:" ";
  11. display: block;
  12. position: absolute;
  13. width:;
  14. height:;
  15. box-sizing: border-box;
  16. transition-property: height,width,left,top;
  17. transition-duration: 0.5s;
  18. transition-timing-function: ease-in;
  19. z-index:;
  20. }
  21. .border::before {
  22. height: 100%;
  23. left: 50%;
  24. }
  25. .wrap:hover > .border::before {
  26. left:;
  27. width: 100%;
  28. border: 6px solid #000;
  29. border-left-color: transparent;
  30. border-right-color: transparent;
  31. }
  32. .border::after {
  33. width: 100%;
  34. top: 50%;
  35. }
  36. .wrap:hover > .border::after {
  37. height: 100%;
  38. top:;
  39. border: 4px solid #000;
  40. border-top-color: transparent;
  41. border-bottom-color: transparent;
  42. }

主要通过border:6px solid #000这个属性,当width和height都设置为100%时,把左右或上下的border设置为transparent就可以实现::after和::before拼装成长方形,两边都是从中间扩展,所以最初left和top设置为50%;最后需要注意 transition-property: height,width,left,top;的设置。

最终效果如图所示:

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

CSS3动画:流彩文字效果+图片模糊效果+边框伸展效果实现的更多相关文章

  1. 利用纯CSS3实现超立体的3D图片侧翻倾斜效果

    原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...

  2. 纯CSS3实现超立体的3D图片侧翻倾斜效果

    看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是创意不错.先来看看效果图.那么接下来我们分析一下源码吧,显示html代码,非常简单: ...

  3. css3动画,点击圆形背景扩展整个页面效果

    上次做项目的时候,要求点击链接,这个链接的圆形背景扩散充满整个页面,今天把这个效果整理一下,是简单的css3的动画特效,粘贴下面的代码看效果 <!DOCTYPE html> <htm ...

  4. CSS3动画产生圆圈由小变大向外扩散的效果

    涉及到 CSS3 的动画(animation).2D 转换(transform: scale),具体如代码所示. github: https://github.com/wind-stone/CSS3- ...

  5. GridControl的单元格中以buttonEdit实现文字和图片按钮并存的效果

    话不多说,先上效果图 对于第一列的效果是如何实现的就不多说了,网上有很多例子 重点是第三列的效果实现方法,代码如下 private void GridSet() { DevExpress.XtraEd ...

  6. CSS3总结三:文字(text)/字体、文本、文本装饰、多列

    Text-Decoration text-shadow text-decoration Font font font-face Text 常用Text属性 Multi-column Multi-col ...

  7. CSS3动画实现高亮光弧效果,文字和图片(一闪而过)

    前言 好久没有写博客啦,高亮文字和图片一闪而过的特效,用CSS3来写 先看文字吧, 就上代码了 .shadow { /* 背景颜色线性渐变 */ /* 老式写法 */ /* linear为线性渐变,也 ...

  8. Css3动画效果,彩色文字效果,超简单的loveHeart

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...

  9. 使用 CSS3 动画实现的 3D 图片过渡特效

    这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transit ...

随机推荐

  1. vue局部组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. HTML页面中插入CSS样式的三种方法

    1. 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表. &l ...

  3. 微信小程序-form表单-获取用户输入文本框的值

    微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...

  4. springcloud开篇

    微服务作为现在的常用架构,已经到了不学不行的地步.君不见spring官网https://spring.io/已经将springboot,springcloud,spring cloud data fl ...

  5. ffmpeg常用转换命令

    音频转换: 1.转换amr到mp3: ffmpeg -i shenhuxi.amr amr2mp3.mp3 2.转换amr到wav: ffmpeg -acodec libamr_nb -i shenh ...

  6. 【app】自动化必备之adb使用

    1.1 Adb介绍 adb(android debug bridge)是android sdk自带的一个工具 Adb是用来连接android设备和PC端的桥梁,通过adb工具,用户可以在PC端对手机进 ...

  7. 一道题引出对LinkedList源码的研究

    题目:打开一个文本文件,每次读取一行内容,将每行作为一个String读入,并将那个String对象置入一个LinkedList中,按照相反的顺序打印出LinkedList中的所有行. 解题代码: pu ...

  8. react-native热更新之CodePush详细介绍及使用方法

    react-native热更新之CodePush详细介绍及使用方法 2018年03月04日 17:03:21 clf_programing 阅读数:7979 标签: react native热更新co ...

  9. Java内存溢出异常(下)

    此篇是上一篇文章Java内存溢出异常(上)的续篇,没有看过的同学,可以先看一下上篇.本篇文章将介绍剩余的两个溢出异常:方法区和运行时常量池溢出. 方法区和运行时常量池溢出 这部分为什么会放在一起呢?在 ...

  10. python练习四—简单的聊天软件

    python最强大的是什么?库支持!!有了强大的库支持,一个简单的聊天软件实现就更简单了,本项目思路如下 # 项目思路 1. 服务器的工作 * 初始化服务器 * 新建一个聊天房间 * 维护一个已链接用 ...