html文字滚动代码加闪烁

木君言 2周前 7浏览 0评论

今天来分享一个HTML文字滚动代码加闪烁的小技巧！

<!DOCTYPE html>
<html>
<head>
    <title>文字滚动加闪烁</title>
    <style>
        .scroll {
            position: relative; 
            overflow: hidden;
            width: 100%; 
            height: 50px; 
            background-color: #f2f2f2;
        }

        .scroll p {
            position: absolute; 
            width: 100%; 
            height: 100%; 
            margin: 0; 
            line-height: 50px; 
            text-align: center; 
            font-size: 18px; 
            color: #333;
            animation: move 5s linear infinite;
        }

        .scroll p span {
            display: inline-block; 
            animation: blink 1s linear infinite;
        }

        @keyframes move {
            0% { top: 0; }
            100% { top: -100%; }
        }

        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0; }
            100% { opacity: 1; }
        }
    </style>
</head>

<body>
    <div class="scroll">
        <p><span>这是文字滚动加闪烁的效果！</span></p>
    </div>
</body>
</html>

通过将文字嵌套在一个div中，并将其overflow属性设置为hidden，可以实现文字自动滚动的效果。然后使用CSS动画来控制滚动的速度和方向，最后再加上字体闪烁的效果，使页面更加生动有趣！

上一篇 html文字水平右对齐代码

下一篇 html文字浮于图片上方怎么设置

网站导航

网站导航

最近发表

文章归档

html文字滚动代码加闪烁