无缝轮播图片

来源：互联网发布：iphone 照片传到mac 编辑：程序博客网时间：2024/05/16 06:41
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        body{            margin: 0;            padding: 0;            background-color: #F7F7F7;        }        .view{            width: 882px;            height: 85px;            margin: 200px auto;            position: relative;            overflow: hidden;            border: 1.5px solid #583d80;        }        ul{            width: 1760px;            height: 85px;            padding: 0;            margin: 0;            list-style: none;            position: absolute;            left: 0;            animation: move 7s linear infinite;        }        li{            float: left;            font-size: 0;        }        @keyframes move {            0%{            }            100%{                transform: translateX(-882px);            }        }        .view:hover ul{            /*animation-paly-state:              running:播放              paused: 暂停*/            animation-play-state: paused;        }    </style></head><body><div class="view">    <ul>        <li><img src="images/1.jpg" alt=""></li>        <li><img src="images/2.jpg" alt=""></li>        <li><img src="images/3.jpg" alt=""></li>        <li><img src="images/4.jpg" alt=""></li>        <li><img src="images/5.jpg" alt=""></li>        <li><img src="images/6.jpg" alt=""></li>        <li><img src="images/7.jpg" alt=""></li>        <li><img src="images/1.jpg" alt=""></li>        <li><img src="images/2.jpg" alt=""></li>        <li><img src="images/3.jpg" alt=""></li>        <li><img src="images/4.jpg" alt=""></li>        <li><img src="images/5.jpg" alt=""></li>        <li><img src="images/6.jpg" alt=""></li>        <li><img src="images/7.jpg" alt=""></li>    </ul></div></body></html>
阅读全文
0 0