公告不停的滚动

2020-03-31  本文已影响0人  秀萝卜
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3_MARQUEE</title>

    <style>
        .marquee {
            width: 450px;
            margin: 0 auto;
            overflow: hidden;
            white-space: nowrap;
            box-sizing: border-box;
            animation: marquee 10s linear infinite;
        }

        .marquee:hover {
            animation-play-state: paused
        }

        @keyframes marquee {
            0%   { text-indent: 30rem }
            100% { text-indent: -30rem }
        }

        /* Make it pretty */
        .microsoft {
            position: relative;
            font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
        }
    </style>
</head>
<body>
    <p class="microsoft marquee">2020年愿大家一切顺利,身体健康,开心快乐</p>
</body>
</html>

上一篇下一篇

猜你喜欢

热点阅读