css3文字颜色从左到右动画

weixin_30649859

于 2018-07-25 11:18:00 发布

阅读量818

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lcosima/p/9364915.html

本文介绍了一种使用HTML和CSS实现的滑块解锁效果。通过定义特定的样式和动画，使得滑块能够响应用户的拖动操作，并在拖动到指定位置时完成解锁动作。

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>