利用css使文字渐变

[mark_c]本博客加入QQ群就是这个效果,代码来至:青找博客英文名:Qing Zhao[/mark_c]

效果图

HTML

<div class="masked"><p>
一个人真正优秀的特质来自于内心想要变得更加优秀的那种强烈的渴望,和对生命的追求那种火热的激情。
<br></p></div>

CSS

.masked p {
  display:block;
  /**width:355px;
  height:50px;**/
  /*渐变背景,此处为能无缝拼接的渐变 即0~100%*/   /*linear-gradient(线性渐变)*/
  background-image:-webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db);
  color:transparent;
  /*文字填充色为透明*/
  -webkit-text-fill-color:transparent;
  -webkit-background-clip:text;
  /* background-clip 规定背景的绘制区域:*/   /*背景剪裁为文字,相当于用背景填充文字 CSS3新属性*/
  -webkit-background-size:200% 100%;
  /*背景图片向水平方向扩大一倍,这样background-position才有移动与变化的空间*/
  background-size:200% 100%;
  /* 动画 */
  -webkit-animation:masked-animation 4s infinite linear;
}
@keyframes masked-animation {
  0% {
  background-position:0 0;
  /*background-position 属性设置背景图像的起始位置。*/
}
100% {
  background-position:-100% 0;
}
}@-webkit-keyframes masked-animation {
  0% {
  background-position:0 0;
}
100% {
  background-position:-100% 0;
}
}

加群入久伴博客官方微信群

加入久伴官方微信群有啥优势?

1.文章内部资源由于时间久远可能失效,加群,群内可以第一时间反馈

2.网站中教程不一定适用任何人,加群可以第一时间咨询并解决您得疑惑

3.你游荡于互联网,也需要群体,加群一起互动交流,畅所欲言

扫描下方二维码即可加入交流讨论

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA赞助
共{{data.count}}人
人已赞助
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索