# 渐变的效果

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>纯CSS3实现文字的渐变动画</title>
    <style>
     .slideShine{
     background:#871317 -webkit-linear-gradient(left,#ff0,#ff0 0%,#ff0 100%,#ff0) no-repeat 100% 100%;
     background-size:20% 100%; 
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-size: 36px;
     text-align: center;
     font-weight: bold;
     text-decoration: underline;
}
.slideShine {
  -webkit-animation: slideShine 8s linear 1;
  animation: slideShine 4s linear 1;
 }
  @keyframes slideText {
    0% {
      // background-position: 0 0;
      background-size: 0% 100%;
    }
    100% {
      // background-position: 100% 100%;
      background-size: 100% 100%;
    }
  }
      </style>
</head>
<body>

<p class="slideShine" >→css3文字渐变动画效果 >></p> 
 
 
 
</body>
</html>
← 常用且容易遗忘的CSS样式清单整理目录 →