CSS3动画:流彩文字效果+图片模糊效果+边框伸展效果实现
前言
首先第一步,先布局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;}
- }
说明:
- 将渐变色设置为文字所在盒的背景色:
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才有移动与变化的空间。
可参考文章:《小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动画:流彩文字效果+图片模糊效果+边框伸展效果实现的更多相关文章
- 利用纯CSS3实现超立体的3D图片侧翻倾斜效果
原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...
- 纯CSS3实现超立体的3D图片侧翻倾斜效果
看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是创意不错.先来看看效果图.那么接下来我们分析一下源码吧,显示html代码,非常简单: ...
- css3动画,点击圆形背景扩展整个页面效果
上次做项目的时候,要求点击链接,这个链接的圆形背景扩散充满整个页面,今天把这个效果整理一下,是简单的css3的动画特效,粘贴下面的代码看效果 <!DOCTYPE html> <htm ...
- CSS3动画产生圆圈由小变大向外扩散的效果
涉及到 CSS3 的动画(animation).2D 转换(transform: scale),具体如代码所示. github: https://github.com/wind-stone/CSS3- ...
- GridControl的单元格中以buttonEdit实现文字和图片按钮并存的效果
话不多说,先上效果图 对于第一列的效果是如何实现的就不多说了,网上有很多例子 重点是第三列的效果实现方法,代码如下 private void GridSet() { DevExpress.XtraEd ...
- CSS3总结三:文字(text)/字体、文本、文本装饰、多列
Text-Decoration text-shadow text-decoration Font font font-face Text 常用Text属性 Multi-column Multi-col ...
- CSS3动画实现高亮光弧效果,文字和图片(一闪而过)
前言 好久没有写博客啦,高亮文字和图片一闪而过的特效,用CSS3来写 先看文字吧, 就上代码了 .shadow { /* 背景颜色线性渐变 */ /* 老式写法 */ /* linear为线性渐变,也 ...
- Css3动画效果,彩色文字效果,超简单的loveHeart
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...
- 使用 CSS3 动画实现的 3D 图片过渡特效
这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transit ...
随机推荐
- vue局部组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML页面中插入CSS样式的三种方法
1. 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表. &l ...
- 微信小程序-form表单-获取用户输入文本框的值
微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...
- springcloud开篇
微服务作为现在的常用架构,已经到了不学不行的地步.君不见spring官网https://spring.io/已经将springboot,springcloud,spring cloud data fl ...
- ffmpeg常用转换命令
音频转换: 1.转换amr到mp3: ffmpeg -i shenhuxi.amr amr2mp3.mp3 2.转换amr到wav: ffmpeg -acodec libamr_nb -i shenh ...
- 【app】自动化必备之adb使用
1.1 Adb介绍 adb(android debug bridge)是android sdk自带的一个工具 Adb是用来连接android设备和PC端的桥梁,通过adb工具,用户可以在PC端对手机进 ...
- 一道题引出对LinkedList源码的研究
题目:打开一个文本文件,每次读取一行内容,将每行作为一个String读入,并将那个String对象置入一个LinkedList中,按照相反的顺序打印出LinkedList中的所有行. 解题代码: pu ...
- react-native热更新之CodePush详细介绍及使用方法
react-native热更新之CodePush详细介绍及使用方法 2018年03月04日 17:03:21 clf_programing 阅读数:7979 标签: react native热更新co ...
- Java内存溢出异常(下)
此篇是上一篇文章Java内存溢出异常(上)的续篇,没有看过的同学,可以先看一下上篇.本篇文章将介绍剩余的两个溢出异常:方法区和运行时常量池溢出. 方法区和运行时常量池溢出 这部分为什么会放在一起呢?在 ...
- python练习四—简单的聊天软件
python最强大的是什么?库支持!!有了强大的库支持,一个简单的聊天软件实现就更简单了,本项目思路如下 # 项目思路 1. 服务器的工作 * 初始化服务器 * 新建一个聊天房间 * 维护一个已链接用 ...