JS+CSS动画 Banner无限轮播图呼吸轮播

最新推荐文章于 2024-02-09 17:30:00 发布

HandsomeDanielWu

最新推荐文章于 2024-02-09 17:30:00 发布

阅读量293

点赞数

分类专栏： JS CSS 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/HandsomeDanielWu/article/details/126052230

版权

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .carousel{
            width: 650px;
            height: 360px;
            border: 1px solid #000;
            /* 居中显示上下50px 左右auto */
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        .carousel ul{
            /* 去掉li的左边的· */
            list-style: none;
            /* 设置大宽度，让<li>float上来 */
            width: 6000px;
            /* 给子标签的绝对定位做标记物 */
            position: relative;
            left: 0px;
            /* 过渡动画 ：动画方向 持续时间 模式 延迟*/
            transition: left 0.5s ease 0s;
        }
        .carousel ul li{
            /* 边框 宽度 实线 颜色 */
            border: 1px solid #000;
            font-size: 80px;
            /* 文字居中中 */
            line-height: 358px;
            text-align: center;
            float: left;
            width: 648px;
        }
        .carousel .leftBtn{
            /* 覆盖用绝对定位 */
            position: absolute;
            /* 绝对定位用的 */
            left: 20px;
            /* 垂直居中 */
            top: 50%;
            margin-top: -25px;
            width: 50px;
            height: 50px;
            background-color: orange;
            border-radius: 50%;
        }
        .carousel .rightBtn{
            /* 覆盖用绝对定位 */
            position: absolute;
            /* 绝对定位用的 */
            right: 20px;
            /* 垂直居中 */
            top: 50%;
            margin-top: -25px;
            width: 50px;
            height: 50px;
            background-color: orange;
            border-radius: 50%;
        }