css写无缝滚动
html结构:
<div class="authority"> <ul> <li> <img src="./images/replace/zizhi01.jpg" alt=""> </li> <li> <img src="./images/replace/zizhi02.png" alt=""> </li> <li> <img src="./images/replace/zizhi03.jpg" alt=""> </li> <li class="quanwei"> <div> <img src="./images/replace/zizhi04.jpg" alt=""> </div> <div> <img src="./images/replace/zizhi04.jpg" alt=""> </div> </li> <li> <img src="./images/replace/zizhi01.jpg" alt=""> </li> <li> <img src="./images/replace/zizhi02.png" alt=""> </li> <li> <img src="./images/replace/zizhi03.jpg" alt=""> </li> <li class="quanwei"> <div> <img src="./images/replace/zizhi04.jpg" alt=""> </div> <div> <img src="./images/replace/zizhi04.jpg" alt=""> </div> </li> </ul> </div>
css
.authority{ width: 100%; overflow: hidden; } .authority ul{ width: 2560px; animation: gun 10s linear infinite; } .authority ul:hover{ animation-play-state: paused; } .authority ul>li{ float: left; height: 448px; background-size: cover; } .authority ul>li img{ width: 320px; }
css动画:
@keyframes gun{ from{ transform: translateX(0px); } to{ transform: translateX(-1280px ); } }
http://websong.gitee.io/songyublog/