CSS实现跑马灯滚动文字

最新推荐文章于 2024-06-19 14:56:38 发布

JavaEEJava

最新推荐文章于 2024-06-19 14:56:38 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/hcg012/article/details/121737968

版权

HTML 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

使用CSS实现跑马灯文字滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- long words -->
<div class="cssmarquee">
    <div class="wrapper">
        <h3 class="marqueeWords">
            Hello world!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;热烈庆祝程序员节！&nbsp;&nbsp;May you have a happy day!&nbsp;&nbsp;God bless  you!&nbsp;&nbsp;Thank you!&nbsp;&nbsp;
        </h3>
    </div>
</div>
</body>
<style type="text/css">
    body {
        width:900px;
        margin: auto;
    }
    .cssmarquee {
        position: relative;
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 24px;
        background: rgba(255, 255, 255, .6);
        overflow: hidden;
    }
    .cssmarquee .wrapper {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        animation: cssmarqueeWrapper 30s linear infinite;
    }
    .cssmarquee .marqueeWords {
        position: absolute;
        height: 100%;
        left: 0;
        top: 0;
        font-weight: bold;
        margin: 0;
        text-align: left;
        white-space: nowrap;
        transform:translateX(0);
        animation: cssmarquee 30s linear infinite;
    }
    @keyframes cssmarqueeWrapper {
        0% {
            transform: translateX(100%); /* parent 100% */
        }
        100% {
            transform: translateX(0);
        }
    }
    @keyframes cssmarquee {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-100%); /* words -100% */
        }
    }
</style>
</html>

JavaEEJava

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS实现跑马灯滚动文字

使用CSS实现跑马灯文字滚动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div class="cssmarquee"> <div class="wrapper"&g
复制链接

扫一扫

专栏目录