依赖css3动画实现
彩虹发光字体演示.gif
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{
margin-left: calc(50%-10px);
list-style: none;
text-align: center;
}
li{
margin: 4px 0 0 0;
font-size: 16px;
background: -webkit-linear-gradient(left,
#ffffff,
#ff0000 6.25%,
#ff7d00 12.5%,
#ffff00 18.75%,
#00ff00 25%,
#00ffff 31.25%,
#0000ff 37.5%,
#ff00ff 43.75%,
#ffff00 50%,
#ff0000 56.25%,
#ff7d00 62.5%,
#ffff00 68.75%,
#00ff00 75%,
#00ffff 81.25%,
#0000ff 87.5%,
#ff00ff 93.75%,
#ffff00 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
animation: masked-animation 2s infinite linear;
}
@keyframes masked-animation {
0% {
background-position: 0 0;
}
100% {
background-position: -100%, 0;
}
}
</style>
</head>
<body>
<ul>
<li>此时意映飞草长</li>
<li>爱的人在路上</li>
<li>我知他风雨兼程</li>
<li>途径日暮不赏</li>
<li>穿越人海只与你相拥</li>
<li>此刻以皓月当空</li>
<li>感同身受给你救赎热望</li>
<li>让世间美好与你环环相扣</li>
<li>爱的人手捧星光</li>
<li>我知他乘风破浪</li>
<li>去了黑暗一趟</li>
<li>感同身受</li>
<li>给你救赎热望</li>
<li>知道你不能还要你感受</li>
<li>让星光加了一点彩虹</li>
<li>当樱花开的纷纷扬扬</li>
<li>当世间美好</li>
<li>与你环环相扣</li>
</ul>
</body>
</html>
网友评论