CSS3实现轮播动画代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS3实现轮播动画代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1863字，纯文字阅读大概需要3分钟。

内容图文

轮播动画简单实现

现在的前端，越来越注重用户交互和体验，有很多动画和效果是很常见的，如本篇要讲的主题：轮播动画。这和以前经常听到的一个名词–”跑马灯“效果一样。在CSS3出来之前，都是通过JavaScript实现的动画，现在我们完全可以使用CSS3，性能有很大的提升，兼容性也已经很不错，尤其是移动端。

CSS3实现动画性能会有极大提升，特别是当页面动画较多或定时器较多时。

html结构：

    <h2>CSS实现</h2>
    <p class="wrapper-css">
        <p class="container-css marquee">
            <p>今天</p>
            <p>明天</p>
            <p>后天</p>
            <p>今天</p><!-- 辅助元素，为实现循环轮播 -->
        </p>
    </p>

可以看到，依然需要在后面添加一个重复辅助元素，实现循环轮播效果。

CSS代码：

    // 轮播动画
        @-webkit-keyframes marquee {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
            }
            27% {
                -webkit-transform: translate3d(0, 0, 0);
            }
            33% {
                -webkit-transform: translate3d(0, -100%, 0);
            }
            60% {
                -webkit-transform: translate3d(0, -100%, 0);
            }
            67% {
                -webkit-transform: translate3d(0, -200%, 0);
            }
            94% {
                -webkit-transform: translate3d(0, -200%, 0);
            }
            100% {
                -webkit-transform: translate3d(0, -300%, 0);
            }
        }
        @keyframes marquee {
            0% {
                transform: translate3d(0, 0, 0);
            }
            /* 100/3 * (2s/2.5s) => 26.7% => 27% */
            27% {
                transform: translate3d(0, 0, 0);
            }
            /* 100/3 =>33.3 => 33% */
            33% {
                transform: translate3d(0, -100%, 0);
            }
            60% {
                transform: translate3d(0, -100%, 0);
            }
            67% {
                transform: translate3d(0, -200%, 0);
            }
            94% {
               transform: translate3d(0, -200%, 0);
            }
            100% {
                transform: translate3d(0, -300%, 0);
            }
        }
        .wrapper-css {
            width: 200px;
            height: 30px;
            margin: 10px;
            overflow: hidden;
        }

        .container-css {
            height: 30px;
            -webkit-animation: marquee 7.5s linear infinite;/* 2.5s(2s + 0.5s) * 3 => 7.5s */
            animation: marquee 7.5s linear infinite;
        }
        .container-css p {
            width: 100%;
            height: 30px;
            margin: 0;
            line-height: 30px;
            font-size: 18px;
        }

如上，我们使用CSS3定义动画关键帧，并结合transform位移实现无缝轮播动画，通过移动容器实现轮播效果，主要需要根据轮播元素计算动画关键帧点

以上就是CSS3实现轮播动画代码的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的CSS3实现轮播动画代码全部内容，希望文章能够帮你解决CSS3实现轮播动画代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---