<!--
* @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>