css3文字颜色从左到右动画

本文转载自查看原文 2018-07-25 11:18 2251 前端开发

1、代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .test {
      width: 428px;
      height: 32px;
      border: 1px solid black;
      text-align: center;
    }

    #gradent {
      background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, #fff), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d));
      /*-webkit-text-fill-color: transparent;*/
      -webkit-animation: slidetounlock 3s infinite;
      line-height: 32px;
      display: inline-block;
      width: 200px;
    }

    @keyframes slidetounlock {
      0% {
        background-position: -100px 0
      }
      100% {
        background-position: 100px 0
      }
    }
  </style>
</head>
<body>
<div onclick="test()" class="test">
  <span id="gradent">请按住滑块，拖动到最右边</span></div>

</body>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 css3文字颜色渐变动画 css3文字颜色动态渐变 css3文字颜色渐变和文字阴影特效 CSS3文字倒影 css3文字与字体样式 css3文字倒影样式 CSS3文字渐变效果盘点5个典型的CSS3文字特效 css3文字描边加外发光 css3文字边框样式设置