用动画实现轮播效果（animation）

最新推荐文章于 2023-03-16 11:09:42 发布

落雁霞

最新推荐文章于 2023-03-16 11:09:42 发布

阅读量299

点赞数

文章标签：动画 css3 css

本文链接：https://blog.youkuaiyun.com/m0_61373758/article/details/123213247

版权

本文详细介绍了如何利用CSS3的动画属性创建出流畅的轮播图效果，包括过渡动画和关键帧动画的使用，以及如何控制轮播图的自动切换和导航点的交互响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <style>
        .carousel {
            width: 520px;
            height: 280px;
            border: 3px solid #000;
            overflow: hidden;
            position: relative;
            margin: 50px auto;
        }

        .carousel ul {
            list-style: none;
            margin: 0;
            padding: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 2080px;
            height: 280px;
            /* 使用动画 */
            animation: lunbo 6s infinite;
        }

        .carousel ul li {
            float: left;
        }

        /* 清除浮动 */
        .carousel ul:after {
            content: '';
            display: block;
            clear: both;
        }

        /* 给动画起名字 */
        @keyframes lunbo {
            0% {
                left: 0;
            }

            33% {
                left: -520px;
            }

            66% {
                left: -1040px;

最低0.47元/天解锁文章