通过代码添加网页文字渐变色轮换效果

 2019年04月18日  129 次 0 条 2  


请使用手机扫码打开

侧边
   
  本文共1047个字,预计阅读时间需要3分钟。

我们在开发网页过程中,经常会使用一些渐变文字的提高网页的美化程度,但是很多情况下都是静态的,今天发现一种使用纯CSS实现的动态渐变文字,记录下来,以备不时之需。具体如下:

效果如下

我们所过的每个平凡的日常,也许就是连续发生的奇迹。

Html
<div class="masked"><p>
我们所过的每个平凡的日常,也许就是连续发生的奇迹。
</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;
}
}
本文地址:https://www.funtx.cn/1604.html
作者授权:除特别说明外,本文由 Fatansy 原创编译并授权 「饭特喜」 刊载发布。
版权声明:本文使用 「署名-非商业性使用-相同方式共享 4.0 国际」 创作共享协议,转载或使用请遵守署名协议!
NEXT:已经是最新一篇了

发表评论


表情

签到 ← 打字麻烦?那就一键签到好了。