渐变色荧光文字

最新推荐文章于 2025-05-05 14:12:43 发布

批量小王子

最新推荐文章于 2025-05-05 14:12:43 发布

阅读量210

点赞数 6

分类专栏： 07_前端动画效果文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_58149406/article/details/145642165

版权

07_前端动画效果专栏收录该内容

18 篇文章

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #000;
            margin: 0;
        }

        .path-container {
            position: relative;
<!--            width: 800px;-->
<!--            height: 800px;-->
        }

        .moving-text {
            position: absolute;
            font-size: 50px;
            font-weight: bold;
            text-align: center;
            text-wrap: nowrap;
            animation: move 8s linear infinite, colors 4s linear infinite;
            background: linear-gradient(90deg, 
                #ff0000, #ff8000, 
                #ffff00, #00ff00,
                #00ffff, #0000ff,
                #8000ff, #ff0080);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            background-size: 400% 100%;
        }

<!--        @keyframes move {-->
<!--            0% {-->
<!--                transform: rotate(0deg) translateX(150px) rotate(0deg);-->
<!--            }-->
<!--            100% {-->
<!--                transform: rotate(360deg) translateX(150px) rotate(-360deg);-->
<!--            }-->
<!--        }-->

        @keyframes colors {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
    </style>
</head>
<body>
    <div class="path-container">
        <div class="moving-text">Good Morning</div>
    </div>
</body>
</html>