利用CSS实现多彩文字:
设置样式:
h3 {
font-size: 2rem;
text-transform: uppercase;
color: line;
font-weight: 600;
font-size: 1.8rem;
font-family: Arial;
line-height: 0.833;
letter-spacing: 10px;
color: #fff;
background: -webkit-linear-gradient(45deg, #00a0e9, #10d39d, #00a0e9, #10d39d);
-moz-linear-gradient(45deg, #00a0e9, #10d39d, #00a0e9, #10d39d);
-ms-linear-gradient(45deg, #00a0e9, #10d39d, #00a0e9, #10d39d);
/* 渐变背景 */
color: transparent;
/*设置字体颜色透明*/
-webkit-background-clip: text;
/*背景裁剪为文本形式*/
animation: ran 20s linear infinite;
/*动态20s展示*/
}
做一个动画效果:
@keyframes ran {
from {
backgroud-position: 0 0;