css 光影掠过文字显现动画

思路：
	整体背景为黑色，文字所在背景使用渐变色设置为黑白渐变，使用背景剪裁到文字上，然后控制背景size，移动背景位置，即可实现当背景为白色时，显现文字

效果图：

在这里插入图片描述

在这里插入图片描述
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 100vh;
            display: flex;
            background-color: black;
        }
        .f{
            margin: auto;
        }
        .n{
            font-size: 60px;
            color: transparent; //文字不能设置颜色，否则剪裁文字背景无法显示
            letter-spacing: 5px;
            background-image:linear-gradient(to right,#000,#fff,#000);
            -webkit-background-clip: text;
            background-size: 40%;
            background-repeat: no-repeat;
            background-position: center;
            animation: move linear 3s infinite;
        }
        @keyframes move{
            from{
                background-position: -100%;
            }
            to{
                background-position: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="f">
        <h1 class="n">
            hello world,hello everyone!
        </h1>
    </div>

    <script src="./1.js"></script>
</body>
</html>
版权声明：本文为weixin_43294560原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。