html+css仿轮播图

css样式

*{margin: 0;padding: 0;}
        @font-face {
            font-family: 'iconfont';
            src: url('./font/iconfont.ttf?t=1626933441384') format('truetype');
        }
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            color: #e0e0e0;
            font-weight: bold;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            position: absolute;
            right: 10px;
        }
        .wrap{
            width: 1226px;
            height: 460px;
            background-color: red;
            margin: 100px auto;
        }
        .nav{
            width: 234px;
            height: 460px;
            background-color: #888888;
            float: left;
            line-height: 42px;
            position: relative;
        }
        .banner{
            width: 992px;
            height: 460px;
            background-color: pink;
            float: left;
            position: relative;
            overflow: hidden;
        }
        .nav>ul{
            margin-top: 25px;
        }
        .nav>ul li{
            list-style: none;
            position: relative;
        }
        .nav>ul li a{
            color: #e0e0e0;
            text-decoration: none;
            margin-left: 25px;
        }
        .nav>ul  li:hover{
           background-color: orange;
        }
        .banner>ul{
            width: 5952px;
            list-style: none;
            margin: 0;
            padding: 0;
            position: absolute;
            animation: carousel 10s  steps(1,end) infinite;
        }
        .banner>ul li{
            float: left;
        }
        .banner>ul li img{
           width: 992px;
           height: 460px;
        }
       @keyframes carousel{
           0%{
               left: 0;
           }
           20%{
               left: -991px;
           }
           40%{
                left: -1982px;
           }
           60%{
                left: -2973px;
           }
           80%{
                left: -3964px;
           }
           100%{
                left: -4956px;
           }
       }
        .banner .dot{
            position: relative;
            z-index: 1;
            top: 400px;
            left: 750px;
        }
        .banner .dot span{
            display: block;
            width: 25px;
            height: 25px;
            float: left;
            margin-left: 11px;
            border: 2px solid gray;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            
        }
        .banner .dot span.active{
            width: 25px;
            height: 25px;
            background-color: tomato;
            position: absolute;
            animation: do 10s steps(1,end) infinite;
        }
        @keyframes do{
           0%{
               left: 0;
           }
           20%{
               left: 40px;
           }
           40%{
                left: 80px;
           }
           60%{
                left: 120px;
           }
           80%{
                left: 160px;
           }
           100%{
               right: 0px;
           }
       }
       .nav ul li:hover .nav_banner{
            width: 992px;
            height: 460px;
            float: left;
            background-color: #fff;
            position: absolute;
            top: -25px;
            left: 235px;
            z-index: 2;
            box-shadow: 5px 5px 15px gray;
       }

HTML代码：

<div class="container">
        <div class="wrap">
            <div class="nav">
                <ul>
                    <li class="nav_li">
                        <a href="#">手机 电话卡</a>
                        <i class="iconfont">&#xeda2;</i>
                        <div class="nav_banner">
                            <div class="il">
                               
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="#">电视 盒子</a>
                        <i class="iconfont">&#xeda2;</i>
                    </li>
                    <li>
                        <a href="#">笔记本 显示器</a>
                        <i class="iconfont">&#xeda2;</i>
                    </li>
                    <li>
                        <a href="#">家电 插线板</a>
                        <i class="iconfont">&#xeda2;</i>
                    </li>
                    <li>
                        <a href="#">出行 穿戴</a>
                        <i class="iconfont">&#xeda2;</i>
                    </li>
                    <li>
                        <a href="#">智能 路由器</a>
                        <i class="iconfont">&#xeda2;</i>
                    </li>
                    <li>
                        <a href="#">电源 配件</a>
                        <i class="iconfont">&#xeda2;</i>
                    </li>
                    <li>
                        <a href="#">健康 儿童</a>
                        <i class="iconfont">&#xeda2;</i>
                    </li>
                    <li>
                        <a href="#">耳机 音箱</a>
                        <i class="iconfont">&#xeda2;</i>
                    </li>
                    <li>
                        <a href="#">生活 箱包</a>
                        <i class="iconfont">&#xeda2;</i>
                    </li>
                </ul>
            </div>
            <div class="banner">
                <ul>
                    <li>
                        <a href="#">
                        <img src="./img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#">
                        <img src="./img/2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#">
                        <img src="./img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#">
                        <img src="./img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#">
                        <img src="./img/5.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#">
                        <img src="./img/1.jpg" alt=""></a>
                    </li>
                </ul>
                <div class="dot">
                   <span  class="active"></span>
                   <span></span>
                   <span></span>
                   <span></span>
                   <span></span>
                   <span></span>
                </div>
            </div>
        </div>
    </div>