聊代码（第九十三集）css样式（之六十三） 下面展示的是移动渐变，请看效果图。
移动渐变效果
海特行者欢迎你
代码：
＜div align="center"＞
＜div class="背景色"＞
＜div class="固定字"＞移动渐变效果＜/div＞
＜div class="渐变及移动字"＞ 海特行者欢迎你＜/div＞
＜/div＞
＜div align="center"＞
＜style type="text/css"＞.背景色 {
background-image:url(http://www.oldkids.cn/upload/2018/09/20/blog_
20180920223543506.jpg);
height:310px; width:572px; overflow: hidden; }
.固定字 { color: yellow; font-size:40px; float:left; margin-right:50%; position: relative; left: 150px; top: 220px;}
.渐变及移动字 {
color:#ffffff; font-size:30px;
height: 100%; width: 85%;
background-image:linear-gradient(to right, rgba( 200,100,50,0.6 ) 0%, rgba( 30,200,0,0.1 ) 50%, rgba( 0,100,0,0.6 ) 100%);
animation: move_eye 10s linear 0s infinite alternate; }
@keyframes move_eye {
from { margin-left:-20%; }
to { margin-left:100%; } }
＜/style＞
＜/div＞
代码解析：
代码background-image:linear-gradient(to right, rgba( 200,100,50,0.6 ) 0%, rgba( 30,200,0,0.1 ) 50%, rgba( 0,100,0,0.6 ) 100%) 是规定背景图怎样颜色渐变的。其中：linear-gradient 表示线性渐变。 to right 表示颜色纵向排列。如果无此设置，就意味是默认的 to left ，可以不写，表示颜色横向排列。百分数是表示渐变周期段的。 rgba 表示采用 RGB 颜色，括号中有四个数值，前三个值依次表示红、绿、蓝，其值范围为0-255。最后一值表示颜色透明度，其值范围为0-1，数值越小越透明。
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
