CSS文字颜色动态渐变

最新推荐文章于 2024-08-31 17:56:43 发布

前端小程

最新推荐文章于 2024-08-31 17:56:43 发布

阅读量581

点赞数 1

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/cssajbq_/article/details/125504111

版权

效果：

文字渐变

<div class="text" > 热销中 </div>

样式修改

.text {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 14px;
  font-size: 12px;
  background-image: linear-gradient(
    90deg,
    rgba(255, 215, 0, 1) 0%,
    rgba(220, 20, 60, 1) 33.3%,
    rgba(248, 110, 0, 1) 66.6%,
    rgba(255, 215, 0, 1) 100%
  );
  /*chrome私有样式，加前缀，文字显示背景图片*/
  -webkit-background-clip: text;
  /*文字颜色设为透明*/
  color: transparent;
  /*扩大背景区域*/
  background-size: 300% 100%;
  background-repeat: repeat;
  // 渐变动画
  animation: preview-cover 2s infinite linear;
}

 // 改变背景定位，按写好的颜色只改变背景定位
@keyframes preview-cover {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -150% 0;
  }
}

 // 或者色相旋转也可以，颜色很多
//@keyframes preview-cover {
 // 0% {
    // -webkit-filter: hue-rotate(0deg);
  //}

  //100% {
    // -webkit-filter: hue-rotate(-90deg);
 // }
//}