锘?slideBox { width: 100%; overflow: hidden; position: relative } .slideBox .hd { width: 100%; position: absolute; bottom: 0; z-index: 1 } .slideBox .hd ul { text-align: center; padding: 0px; margin: 0px; } .slideBox .btns ul li{ width: 24px; height: 8px; margin: 0 3px; } .slideBox .pics ul li{ width: 100%; height: 100%; margin: 0px; list-style:none; } .slideBox .pics ul li a{ } .slideBox .pics ul .on{ display: block; } .slideBox .hd ul li { display: inline-block; position: relative } .slideBox .hd ul li .dot { width: 24px; height: 6px; border-radius: 4px; background-color: hsla(0,0%,60%,.4) } .slideBox .hd ul li span { display: none; color: #fff; position: absolute; width: 100%; font-size: 14px; left: 0; top: 0; line-height: 36px; cursor: pointer } .slideBox .hd ul li.on .liner { width: 24px; height: 6px; border-radius: 4px; animation: liner 2.5s; position: absolute; top: 0; left: 0; background: linear-gradient(90deg,#f5f8fb,#9d9d9e) } .slideBox .hd ul li:hover .dot { display: none } .slideBox .hd ul li:hover { width: 24px; height: 8px; border-radius: 4px; transform: translateY(-50%); background: linear-gradient(90deg,#f5f8fb,#9d9d9e); transition: all .1s ease } .slideBox .hd ul li:hover span { display: inline-block } @keyframes liner { from { width: 0 } to { width: 100% } } .slideBox .bd { width: 100%; position: relative; height: 100%; overflow: hidden } .slideBox .bd li { text-align: center; list-style:none; } .slideBox .bd li div{ background-size: auto 100%; background-repeat:no-repeat; background-position: center top; } .slideBox .bd img { width: 1600px; height: 100%; } .slideBox .bd:hover~.prev { display: block } .slideBox .bd:hover~.next { display: block } .slideBox .prev:hover { display: block } .slideBox .next:hover { display: block } .slideBox .prev { display: none; position: absolute; left: 3%; top: 50%; margin-top: -25px; width: 29px; height: 52px; background: url(Slide2_left_array.png) no-repeat; background-size: cover } .slideBox .next { display: none; position: absolute; right: 3%; top: 50%; margin-top: -25px; width: 29px; height: 52px; background: url(Slide2_right_array.png) no-repeat; background-size: cover } .slideBox .bd li.active { animation-name: ai-big-out; animation-duration: .3s; animation-timing-function: ease; animation-fill-mode: forwards } @keyframes ai-big-out { 0% { z-index: 3; transform: scale(1.1); opacity: 1 } 50% { transform: scale(1.2); opacity: .5 } to { transform: scale(1.3); opacity: 1 } }