css 光影掠过文字显现动画

最新推荐文章于 2024-06-16 20:55:56 发布

神奇大叔

最新推荐文章于 2024-06-16 20:55:56 发布

阅读量595

点赞数

分类专栏：我有奇妙动画文章标签： css 动画 css3

本文链接：https://blog.csdn.net/weixin_43294560/article/details/123204946

版权

我有奇妙动画专栏收录该内容

43 篇文章 4 订阅

订阅专栏

思路：
	整体背景为黑色，文字所在背景使用渐变色设置为黑白渐变，使用背景剪裁到文字上，然后控制背景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>

神奇大叔

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css 光影掠过文字显现动画

思路：整体背景为黑色，文字所在背景使用渐变色设置为黑白渐变，使用背景剪裁到文字上，然后控制背景size，移动背景位置，即可实现当背景为白色时，显现文字效果图：代码示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m
复制链接

扫一扫