css3实现文字扫光渐变动画效果的示例


Posted in HTML / CSS onNovember 07, 2017

本篇文章主要介绍了css3实现文字扫光渐变动画效果的示例,分享给大家,具体如下:

利用css3这个属性(背景剪裁):

background-clip: border-box || padding-box || context-box || no-clip || text

本次用到的就是:  -webkit-background-clip:text;

栗子:

1、

<style>
    .masked{
        text-align: center;
        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;}
    }
</style>
<div class="masked" >
        <h1>→css3文字渐变动画效果 >></h1>
</div>

说明:

-webkit-text-fill-color: transparent;(这里必须填充透明颜色,这样渐变的颜色才会填充到文字上面,去掉这个或者填充别的颜色,效果不明显)

检索或设置对象中的文字填充颜色,若同时设置 <' text-fill-color '> 和 <' color '>,<' text-fill-color '> 定义的颜色将覆盖 <' color '> 属性;

效果:

css3实现文字扫光渐变动画效果的示例

2、跟第一个栗子差不多,多给了一个背景颜色,从局部到全局渐变

.slideShine{
     background:#871317 -webkit-linear-gradient(left,#561214,#febaf7 50%,#ff0 90%,#561214) no-repeat 0 0;
     background-size:20% 100%; 
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-size: 36px;
     text-align: center;
     font-weight: bold;
     text-decoration: underline;
}
.slideShine {-webkit-animation: slideShine 4s linear infinite;animation: slideShine 4s linear infinite;}
@-webkit-keyframes slideShine {
     0% {
          background-position: 0 0;
        }
     100% {
          background-position: 100% 100%;
      }
 }
 @keyframes slideShine {
      0% {background-position: 0 0; }
     100% {background-position: 100% 100%; }
 }
<p class="slideShine" >→css3文字渐变动画效果 >></p>

效果:

css3实现文字扫光渐变动画效果的示例

3、用webkit遮罩来实现文字渐变动画

.text{position: relative;width: 57%;max-width:531px ;}
.text .mask{position: absolute;width: 100%;height: 95%;top: 0;left: 0;-webkit-mask-image:  url(img/text.png);}            
.text .mask i{position: absolute;height:100%;width: 20%;left:0;top:0;background:-webkit-linear-gradient(left,#561214,#febaf7 50%,#ff0 90%,#561214) no-repeat 0 0;animation: lightLine1 4s linear infinite;-webkit-animation: lightLine1 4s linear infinite;background-size:100% 100%;}
@keyframes lightLine1{
    0%{transform:translateX(0) ;}                
    100%{transform:translateX(500%);}
}
@-webkit-keyframes lightLine1{
    0%{-webkit-transform:translateX(0) ;}                
    100%{-webkit-transform:translateX(500%) ;}
}
<div class="text" style="margin: 150px auto;">
     <img src="img/text.png" />
     <div class="mask"><i></i></div>    
</div>

效果:

css3实现文字扫光渐变动画效果的示例

4、实现多颜色文字的渐变

.text2{position: relative;width: 63%;max-width:586px ;}
.text2 .mask{position: absolute;width: 100%;height: 95%;top: 0;left: 1px;-webkit-mask-image:  url(img/text3.png);}         
.text2 .mask i{position: absolute;height:100%;width: 20%;left:0;top:0;background:-webkit-linear-gradient(left,#561214,#febaf7 50%,#ff0 90%,#561214) no-repeat 0 0;animation: lightLine2 4s linear infinite;-webkit-animation: lightLine2 4s linear infinite;background-size:100% 100%;}
@keyframes lightLine2{
    0%{transform:translateX(0) ;}                
    100%{transform:translateX(420%);}
}
@-webkit-keyframes lightLine2{
    0%{-webkit-transform:translateX(0) ;}                
    100%{-webkit-transform:translateX(420%) ;}
}
<div class="text2" style="margin: 150px auto;">
   <img src="img/text3.png" />
   <div class="mask"><i></i></div>    
</div>

效果:

css3实现文字扫光渐变动画效果的示例

因为单纯用第一、二种方法实现不了多种文字的颜色,他都会被<' text-fill-color '>定义的颜色覆盖,所以如果设置文字多种颜色的话,我就用图片来代替了,不过可以看出,用遮罩来实现文字渐变彩虹的效果不佳-^-

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 #HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 #HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 #HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 #HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 #HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 #HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 #HTML / CSS
You might like
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
wxPython实现带颜色的进度条
2019/11/19 Python
如何基于Python实现自动扫雷
2020/01/06 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
世界上最好的足球商店:Unisport
2019/03/02 全球购物
连锁经营管理专业大学生求职信
2013/10/30 职场文书
美国留学经济担保书
2014/05/20 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
升学宴家长致辞
2015/07/27 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
Python实现列表拼接和去重的三种方式
2021/07/02 Python