前言

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

<div class="wrap">
<img src="data: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:;
left:;
width:300px;
height:225px;
z-index:;
}
.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文件:

<?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="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-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="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:;
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:;
top:;
left:;
}
.border::before, .border::after {
content:" ";
display: block;
position: absolute;
width:;
height:;
box-sizing: border-box;
transition-property: height,width,left,top;
transition-duration: 0.5s;
transition-timing-function: ease-in;
z-index:;
}
.border::before {
height: 100%;
left: 50%;
}
.wrap:hover > .border::before {
left:;
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:;
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动画:流彩文字效果+图片模糊效果+边框伸展效果实现》

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. Numpy学习二:数组的索引与切片

    1.一维数组索引与切片#创建一维数组arr1d = np.arange(10)print(arr1d) 结果:[0 1 2 3 4 5 6 7 8 9] #数组的索引从0开始,通过索引获取第三个元素a ...

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

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

  3. 能不能在FOR循环中执行SQL?

    JDBC最基础的For循环处理SQL的方式 以及执行时间 package javaee.net.cn.jdbc; import java.sql.*; public class TestTransac ...

  4. 第84节:Java中的网络编程(中)

    第84节:Java中的网络编程(中) 实现客户端和服务端的通信: 客户端需要的操作,创建socket,明确地址和端口,进行键盘录入,获取需要的数据,然后将录入的数据发送给服务端,为socket输出流, ...

  5. Kubernetes---DaemonSet

    DaemonSet用于管理在集群中每个Node上仅运行一份Pod的副本实例. kind: DaemonSet

  6. Python的基础语法(二)

    0. 前言 接着上一篇博客的内容,我将继续介绍Python相关的语法.部分篇章可能不只是简单的语法,但是对初学者很有帮助,也建议读懂. 1. 表达式 由数字.符号.括号.变量等组成的组合. 算术表达式 ...

  7. Linux 用脚本编写搭建yum本地仓库

    Linux 用脚本编写搭建yum本地仓库 源码如下: #!/bin/bash #该脚本用于自动化搭建本地yum仓库 #挂载光盘 #作者:雨中落叶 #博客:https://www.cnblogs.com ...

  8. HttpContextAccessor不会出现线程同步问题?

    我有一段比较常规的.net core mvc代码,就是StartUp函数中注册HttpContextAccessor到系统DI工厂中,如图: 然后调用方是service层,这个service层是使用a ...

  9. java发送http get请求的两种方式

    长话短说,废话不说 一.第一种方式,通过HttpClient方式,代码如下: public static String httpGet(String url, String charset) thro ...

  10. Java实现敏感词过滤 - IKAnalyzer中文分词工具

    IKAnalyzer 是一个开源的,基于java语言开发的轻量级的中文分词工具包. 官网: https://code.google.com/archive/p/ik-analyzer/ 本用例借助 I ...