您现在的位置是：网站首页> 编程资料编程资料

css3实现文字扫光渐变动画效果的示例CSS3下的渐变文字效果实现示例css 进度条的文字根据进度渐变的示例代码CSS3文字背景色渐变过渡特效源码CSS实现文字高光水波渐变的动态效果实例一款纯css3实现的颜色渐变按钮的代码教程使用CSS3的背景渐变Text Gradient 创建文字颜色渐变CSS 网页文字渐变效果css实现文字颜色渐变的三种方法

2021-09-04 1010人已围观

简介 这篇文章主要介绍了css3实现文字扫光渐变动画效果的示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

利用css3这个属性（背景剪裁）：

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

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

栗子：

1、

→css3文字渐变动画效果 >>

说明：

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

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

效果：

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%; } } 
→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%) ;} }

效果：

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%) ;} }

效果：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：css3实现画半圆弧线的示例代码css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

下一篇：CSS3制作酷炫的条纹背景CSS3条纹背景制作的实战攻略

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网