今天小编跟大家讲解下有关CSS实现文字高光水波渐变的动态效果实例 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS实现文字高光水波渐变的动态效果实例 的相关资料，希望小伙伴们看了有所帮助。
先来看看静态的效果图，动态效果更好
实例代码复制代码代码如下:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>rollcat</title><style type="text/css">*{ margin: 0;padding: 0;}body{ background: #333;font-family:"Helvetica Neue",Helvetica,"microsoft yahei",STHeiTi,sans-serif;}h1{ width: 100%;height: 80px;line-height: 80px;text-align: center;color: green;margin: 50px auto;font-size: 5em;font-weight: normal; background-image: -webkit-linear-gradient(left, #167993, #fbe500 25%, #167993 50%, #fbe500 75%, #167993); background-size: 200% 100%; -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-animation: mask 4s infinite linear;}@-webkit-keyframes mask { 0% { background-position: 0 0;} 100% { background-position: -100% 0;}}p{ width: 100%;height: 80px;line-height: 80px;text-align: center;color: #999;margin: 50px auto;font-size: 2em; background-image: -webkit-linear-gradient(left, #999, #999 5%,#fff 10%, #999 15%, #999); background-size: 200%; -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-animation: anim 3s infinite;}@-webkit-keyframes anim{ 0%{ background-position: 0 0; } 100%{ background-position: -100% 0; }}</style></head><body></p><p><h1>风乍起，吹皱一池春水</h1></p><p><p>最是那一低头的温柔，恰似一朵海莲花不胜凉风的娇羞</p></p><p></body></html>
以上就是利用CSS实现文字高光水波渐变动态效果的全部内容，希望对大家的学习和工作能有所帮助。
来源：爱蒂网
