Y Blog

Appearance

循环滚动效果的实现

🕒 Published at:

在网页设计中，循环滚动效果可以用来展示新闻、通知或其他需要循环展示的信息。本文将介绍如何通过CSS和HTML实现一个简单的循环滚动效果，使内容在容器内无缝滚动。

实现效果 ​

我们希望实现一个循环滚动效果，其中的内容会在容器内水平滚动，并且当鼠标悬停时动画会暂停。

代码实现 ​

以下是实现这一效果的HTML和CSS代码。

HTML ​

html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环滚动效果</title>
    <style>
        #wrap {
            margin: auto;
            margin-top: 50px;
            padding-bottom: 100px;
            overflow: hidden;
            position: relative;
            width: 90%;
            height: 150px;
            white-space: nowrap;
        }

        #slide {
            position: absolute;
            animation: slide 30s linear infinite;
        }

        #slide:hover {
            animation-play-state: paused;
        }

        @keyframes slide {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div id="slide">
            <div>内容</div>
            <div>复制内容</div>
        </div>
    </div>
</body>

</html>