CSS动画轮播图_css轮播图

作者：秋刀鱼在做梦 | 2024-07-09 22:15:53

踩

css轮播图

简要：

轮播图实现方式有很多，在实际工作中，轮播图的实现基本上都是用JS解决的。但是CSS也可以做出轮播图，使用CSS的过渡效果（transition）和动画定义（keyframes）,以及动画的调用（animation）。

这些标签的用法可以自己去网上查，我这里就直接上代码讲解了。

代码模块：

(1) HTML模块：


<body>
    <ul class="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

html非常简单，就是一个简单的列表。

（2） CSS模块

CSS模块比较多，我这里就分开写。

先讲页面布局，再分析动画效果。

①CSS布局


/* 通配符清除默认样式 */
        * {
            /* 清除内外边距 */
            margin: 0;
            padding: 0;
            /* 字体不加粗 */
            font-weight: normal;
            /* 去除下划线 */
            text-decoration: none;
            /* 去除无序列表li标签的小圆点 */
            list-style: none;
        }
 
        body {
            /* 设置背景 */
            background-color: #66CCFF;
        }
 
        .box {
            position: absolute;
            /* 让整个盒子居中 */
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 960px;
            height: 540px;
            /* 溢出隐藏 */
            overflow: hidden;

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/803874