效果图:
文字流光渐变
用到的CSS3属性
-
background-image: 背景图, 设置成渐变背景 -
background-clip: 背景图裁剪, 让背景按照文字来裁剪, 需要针对不同的浏览器添加前缀如:-webkit-background-clip -
text-fill-colororcolor: 设置字体颜色transparent(透明) -
background-size:设置背景图的长度 -
animation: 定义一个动画移动背景
属性说明
-
-webkit-linear-gradient: (left, red 10%,blue 50%,green 60% , yellow 100%);
left: 表示从左到右渐变, 后面表示颜色值 所占的百分比, 需要注意的是我们在设置的时候回将颜色值设置成 0%49%=50%99%, 主要为了在背景做移动动画的时候有产生无缝衔接的效果. -
-webkit-background-clip: 裁剪背景图, 值为text说明文字作为裁剪区域, 为了能看到背景, 我们还需要将文字颜色设置成透明 -
animation: css3动画用于移动渐变的背景, 修改background-position属性即可.需要无限滚动infinite
代码如下:
<div class='box'>LiYajie Coding</div>
样式:
body{
background-color:#000;
}
.box{
width:600px;
margin: 100px auto;
border:1px solid #0094ff;
padding: 20px;
background-image:-webkit-linear-gradient(left,#3498db 0%,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db 100%);
color:transparent;
background-size:200% 100%;
-webkit-background-clip:text;
font-size:4em;
text-align:center;
animation: move 3s infinite linear;
}
@keyframes move{
0%{
background-position:0 0;
}
100%{
background-position:-100% 0;
}
}
