HTML5 + CSS3实现文字刷漆动画效果

最新推荐文章于 2024-05-21 23:21:19 发布

Mikaisa

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量199

点赞数

分类专栏：前端小案例文章标签： js 前端 html5 css3 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_58680712/article/details/129377680

版权

前端小案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

大家好，我是冲击大厂的小韩,这次给大家带来一个小案例，做一个文字刷漆效果的html页面。话不多说，直接上代码.

HTML

<!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>
        *{
            margin: 0;
            padding: 0;
            user-select: none;
            font-family: 'MicrosoftYaHeiUI';
        }
        body{
            background-color: black;
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .info{
            color: white;
            font-size: 8vw;
            font-weight: 550;
            white-space: nowrap;
            position: relative;
        }
        /* 不一定非要使用after伪元素, 使用宽高相等的子元素进行决定定位也可以 */
        .info::after{
            content: "你好, 我是Mikaisa";
            font-size: 8vw;
            color: greenyellow;
            position: absolute;
            left: 0;
            top: 0;
            overflow: hidden;
            white-space: nowrap;
            animation: ani 5s linear infinite;
        }
        @keyframes ani{
            0%{
                width: 0;
                text-shadow: none;
            }
            100%{
                width: 100%;
                border: none;
            }
        }
    </style>
</head>
<body>
    <div class="info">
        你好, 我是Mikaisa
    </div>
</body>
</html>