这次给大家带来css3文字渐变动画，实现css3文字渐变动画的注意事项有哪些，下面就是实战案例，一起来看一下。
利用css3这个属性（背景剪裁）：
background-clip: border-box || padding-box || context-box || no-clip || text
本次用到的就是: -webkit-background-clip:text;
栗子：
1、
.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;} }
→css3文字渐变动画效果 >>
说明：
-webkit-text-fill-color: transparent;(这里必须填充透明颜色，这样渐变的颜色才会填充到文字上面，去掉这个或者填充别的颜色，效果不明显)
检索或设置对象中的文字填充颜色，若同时设置 和 ， 定义的颜色将覆盖 属性；
效果：
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%; } }
效果：
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%) ;}} @@##@@
效果：
因为单纯用第一、二种方法实现不了多种文字的颜色，他都会被定义的颜色覆盖，所以如果设置文字多种颜色的话，我就用图片来代替了，不过可以看出，用遮罩来实现文字渐变彩虹的效果不佳-^-
相信看了本文案例你已经掌握了方法，更多精彩请关注创想鸟其它相关文章！
推荐阅读：
CSS3的鼠标移入图片动态提示效果
Sticky Footer 绝对底部的方法
以上就是css3文字渐变动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609308.html
微信扫一扫 
支付宝扫一扫 
