关于css:轮播图完整样例-纯CSS版本

1次阅读

共计 2905 个字符，预计需要花费 8 分钟才能阅读完成。

<!DOCTYPE html>
<html lang=”en”>

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

<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>

正文完