css3文字闪光滑过效果

css3文字闪光滑过效果（扫光效果），具体也是参照网上的教程，一步步整理的。上代码！！！复制保存为html即可查看效果。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CSS3文字闪光划过效果（扫光效果）</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #222222;
      display: flex;
      align-items: center;
    }

    .shining {
      width: 100%;
      margin: 0 auto;
      text-align: center;
      font-size: 150px;
      color: rgba(255, 255, 255, 0.2);
      /* 文字的颜色必须有透明度，否则展示不出效果 */
      background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 65%);
      /* 角度为倾斜45度的白色光束背景 */
      -webkit-background-clip: text;
      /* 文字遮罩，浏览器支持不是很好 */
      background-size: 60% 160%;
      /* 控制背景光束的大小 */
      background-repeat: no-repeat;
      /* 背景是否重复 */
      background-position: -100% 0;
      /* 背景光束的起始位置 */
      animation: mymoves 2.6s infinite ease-in-out;
      /* 背景光束从左到右的动画 */
    }

    @keyframes mymoves {
      0% {
        background-position-x: -100%;
      }

      100% {
        background-position-x: 200%;
      }
    }
  </style>
</head>

<body>
  <div class="shining">
    夜空中最亮的星
  </div>
</body>

</html>

查看演示代码

Totonoo.com