Css实现水平滚动（跑马灯）效果_世敏网络科技有限公司

全国

语言

简体中文

繁體中文

English

我们承诺100%包做好，完善的售后服务
世敏网络是一家专注于企业建站系统开发，网站建设，网站设计，网站制作，小程序开发，功能定制开发等互联网领域设计的专业公司
多年企业网站建设系统的研发经验
世敏网络拥有多年的企业建站系统研发经验，在不断对方案优化的过程中搭建了"创意+技术+营销"一体化的服务模式

当前位置：首页 / 建站百科 / 网站建设

Css实现水平滚动（跑马灯）效果

时间：2026-08-06浏览量：收藏

Css实现水平滚动（跑马灯）效果

<!DOCTYPE html>
<html>
<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>animation</title>
    <style>
        #wrap {
            width: 500px;
            height: 100px;
            border: 1px solid #ccc;
            position: relative;
            margin: 100px auto;
            overflow: hidden;
        }
        #list {
            position: absolute;
            left: 0;
            top: 0;
            margin: 0;
            padding: 0;
            width: 200%;
            animation: 3s move infinite linear;
        }
        #list li {
            list-style: none;
            width: 98px;
            height: 98px;
            border: 1px solid #ccc;
            background: #222;
            color: #FFF;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            float: left;
        }
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: -500px;
            }
        }
        #wrap:hover #list {
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>
</html>

Css实现水平滚动（跑马灯）效果(图1)