共计 2905 个字符,预计需要花费 8 分钟才能阅读完成。
<!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>
正文完