<!-- * @Author: [you name] * @Date: 2021-09-16 23:22:37 * @LastEditors: [you name] * @LastEditTime: 2021-09-16 23:29:02 * @Description: --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图</title> <style> * { margin: 0; padding: 0; list-style: none; } .wrap { width: 400px; height: 300px; margin: 100px auto; /* border: 2px solid blueviolet; */ overflow: hidden; } .content { /* 容器的大小足够放四张图片 */ width: 1600px; height: 300px; /* background-color: chartreuse; */ /* margin-left: -400px; */ /*动画名称 animation-name: move; */ /* animation-duration: 5s; */ /* 动画播放速度 */ /* animation-timing-function: linear; */ /* 动画播放次数 */ /* animation-iteration-count: infinite; */ /* steps(),逐帧播放 有多少张图片就填多少个数 */ /*动画名称move 动画时长4s infinite循环播放 */ animation: move 4s infinite steps(4); /* 动画延迟时间 animation-delay: 4s; 动画填充模式 animation-fill-mode: backwards; animation-play-state: paused; animation-direction: alternate; */ } /* 光标滑过动画暂停 */ .content:hover { animation-play-state: paused; } .content ul li { width: 400px; height: 300px; float: left; } /* .content ul li:nth-child(odd){ background-color: cornflowerblue; } .content ul li:nth-child(even){ background-color: cyan;} */ .content ul li img { width: 400px; height: 300px; /* background-size: 100%; */ } @keyframes move { from { margin-left: 0; } to { /* 宽度要足够包容四张图片的宽度 */ margin-left: -1600px; } } </style></head><body> <div class="wrap"> <div class="content"> <ul> <li><img src="https://yanxuan-item.nosdn.127.net/d02bdeac95f9493cb9062a7455821384.png?type=webp&imageView&quality=95&thumbnail=355x355"> </li> <li><img src="https://yanxuan-item.nosdn.127.net/670456928cd4f6a42ca47226e3b832eb.jpg?type=webp&imageView&quality=95&thumbnail=355x355"> </li> <li><img src="https://yanxuan-item.nosdn.127.net/a0c3f252a1826411be45f58b1d0be19d.jpg?type=webp&imageView&quality=95&thumbnail=355x355"> </li> <li><img src="https://yanxuan-item.nosdn.127.net/0ae4a38da4f742b01a89dd840f7239d6.png?type=webp&imageView&quality=95&thumbnail=355x355"> </li> </ul> </div> </div></body></html>