<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图demo</title>
<style>
@keyframes move { /* 动画开始 */ 0% { transform: translate(0%, 0); } 25% { transform: translateX(0%); } /* 动画完结 */ 50% { transform: translateX(-33%); } 75% { transform: translateX(-67%); } 100% { transform: translateX(0); }}@keyframes p1 { /* 动画开始 */ 0% { width: 0%; } 25% { width: 100%; } 50% { width: 100%; } 75% { width: 100%; } 100% { width: 100%; }}@keyframes p2 { /* 动画开始 */ 0% { width: 0%; } 25% { width: 0%; } 50% { width: 100%; } 75% { width: 100%; } 100% { width: 100%; }}@keyframes p3 { /* 动画开始 */ 0% { width: 0%; } 25% { width: 0%; } 50% { width: 0%; } 75% { width: 100%; } 100% { width: 100%; }}* { margin: 0; padding: 0; box-sizing: border-box;}.main { position: relative; width: 1000px; height: 500px; margin: 100px auto; overflow: hidden;}li { list-style: none;}.progress { position: absolute; width: 200px; height: 20px; /* background-color: pink; */ bottom: 10px; left: 50%; transform: translate(-50%);}.progress ul li { float: left; width: 60px; height: 4px; border-radius: 2px; margin: 2px; background-color: #444;}.progress ul li em { background-color: #666; display: block; /* background-color: red; */ width: 100%; height: 100%; border-radius: 2px;}.progress ul li:first-child em { animation: p1; animation: p1 9s infinite;}.progress ul li:nth-child(2) em { animation: p2; animation: p2 9s infinite;}.progress ul li:nth-child(3) em { animation: p3; animation: p3 9s infinite;}/* .progress ul li:hover { background-color: #666;} */.md { width: 3000px; height: 500px; /* transform: translateX(-67%); */ /* animation-name: move; animation-duration: 9s; */ animation: move 9s infinite;}img { width: 1000px; height: 500px;}.md .one,.two,.three { float: left; color: white; width: 1000px; height: 500px; position: relative; font: 36px 'Microsoft Yahei'; font-weight: 700;}.two,.three { color: #000;}h2 { background-color: transparent; position: absolute; top: 30%; left: 40%;}.span1 { background-color: transparent; position: absolute; top: 45%; left: 35%; font-weight: 400; font: 24px 'Microsoft Yahei';}.span2 { background-color: transparent; position: absolute; top: 50%; left: 40%; font-weight: 400; font: 24px 'Microsoft Yahei';}.span3 { background-color: transparent; position: absolute; top: 45%; left: 30%; font-weight: 400; font: 24px 'Microsoft Yahei';}.three h2 { background-color: transparent; position: absolute; top: 30%; left: 25%; font-size: 30px;}.three h3 { background-color: transparent; position: absolute; top: 40%; left: 45%; font-size: 30px;}</style>
</head>
<body>
<div class="main">
<div class="md"> <div class="one"> <h2>xPhone.</h2> <span class="span1">Lots to love. Less to spend.</span> <span class="span2">Staring at $399.</span> <img src="./assets/iphone.png" alt=""> </div> <div class="two"> <h2>Tablet</h2> <span class="span3">Just the right amount of everything.</span> <img src="./assets/tablet.png" alt=""> </div> <div class="three"> <h2>Buy a Tablet or xPhone for college.</h2> <h3>Get arPods.</h3> <img src="./assets/airpods.png" alt=""> </div></div><div class="progress"> <ul> <li> <em></em> </li> <li> <em></em> </li> <li> <em></em> </li> </ul></div></div>
</body>
</html>