基于CSS3实现垂直轮播效果

最新推荐文章于 2025-04-06 17:14:08 发布

原创最新推荐文章于 2025-04-06 17:14:08 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css3

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

案例练习

11 篇文章

订阅专栏

本文介绍如何利用CSS3的动画效果实现垂直方向的轮播图展示，通过实例效果图展示具体步骤。

效果图

在这里插入图片描述

方法：使用动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 202px; height: 32px; line-height: 30px;
            margin: 100px auto; border: 1px solid #000;
            position: relative; overflow: hidden;
        }
        .box ul{
            width: 100%; height: 500%; 
            position: absolute; top: 0; left: 0;
            animation: czlb 10s linear infinite;
        }
        .box ul li{
            width: 100%; height: 20%; 
            padding-left: 10px;
        }
        @keyframes czlb {
            0%{top: 0;}
            10%{top: -100%;}
            25%{top: -100%;}
            35%{top: -200%;}
            50%{top: -200%;}
            65%{top: -300%;}
            75%{top: -300%;}
            85%{top: -400%;}
            100%{top: -400%;}
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>第1条公告...</li>
            <li>第2条公告...</li>
            <li>第3条公告...</li>
            <li>第4条公告...</li>
            <li>第1条公告...</li>
        </ul>
    </div>
</body>
</html>