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


Posted in HTML / CSS onAugust 18, 2017

前言

首先第一步,先布局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元素

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

图片模糊效果

先写下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文件:

<?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 */
}

流彩文字效果

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

最终效果如图所示:

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

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

HTML / CSS 相关文章推荐
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 HTML / CSS
详解CSS3开启硬件加速的使用和坑
Aug 21 #HTML / CSS
前端面试必备之CSS3的新特性
Sep 05 #HTML / CSS
纯CSS实现预加载动画效果
Sep 06 #HTML / CSS
使用CSS3制作倾斜导航条和毛玻璃效果
Sep 12 #HTML / CSS
分享8款纯CSS3实现的搜索框功能
Sep 14 #HTML / CSS
详解CSS3 用border写 空心三角箭头 (两种写法)
Sep 29 #HTML / CSS
详解使用CSS3的@media来编写响应式的页面
Nov 01 #HTML / CSS
You might like
php使用curl打开https网站的方法
2015/06/17 PHP
php格式化json函数示例代码
2016/05/12 PHP
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
在Python的循环体中使用else语句的方法
2015/03/30 Python
python中sys.argv参数用法实例分析
2015/05/20 Python
python脚本内运行linux命令的方法
2015/07/02 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
大学生入党自我鉴定
2013/10/31 职场文书
测绘工程个人的自我评价
2013/11/10 职场文书
工作失职检讨书范文
2014/01/16 职场文书
教师学习培训邀请函
2014/02/04 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
观看焦裕禄观后感
2015/06/09 职场文书