文章

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

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

效果如下

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

Html

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

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;
}
}

暂无评论

发表评论