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 Columns分列式布局方法简介
May 03 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
Sep 02 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 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
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
JQuery基础语法小结
2015/02/27 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
初识Javascript小结
2015/07/16 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
Position属性之relative用法
2015/12/14 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
python判断无向图环是否存在的示例
2019/11/22 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
医药工作岗位求职信分享
2013/12/31 职场文书
家长给孩子的评语
2014/01/30 职场文书
关于环保的建议书
2014/05/12 职场文书
创意婚礼策划方案
2014/05/18 职场文书
青年文明号口号
2014/06/17 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
python小型的音频操作库mp3Play
2022/04/24 Python
Redis实现短信验证码登录的示例代码
2022/06/14 Redis