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 相关文章推荐
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
html5使用canvas绘制文字特效
Dec 15 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 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 进度条实现代码
2009/03/10 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
JQuery datepicker 使用方法
2011/05/20 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
Python中的ConfigParser模块使用详解
2015/05/04 Python
在centos7中分布式部署pyspider
2017/05/03 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
高等教育专业自荐信范文
2014/03/26 职场文书
库房保管员岗位职责
2014/04/07 职场文书
初一学生期末评语
2014/04/24 职场文书
大学新闻系自荐书
2014/05/31 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
入党函调证明材料
2014/12/24 职场文书
培训通知书模板
2015/04/17 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL