轮播图完整样例纯CSS版本

站长

2022年09月08日 16:22 · 阅读数 292

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

:root {
  /* 轮播的个数 */
  --s: 3;
  /* 单个 li 容器的高度 */
  /* --h: 36; */


  /* 单次动画的时长 */
  --speed: 3s;
  --w: 1500;
}


@keyframes move {

  /* 动画开始 */
  0% {
    transform: translate(0%, 0);
  }

  30% {
    transform: translateX(0%);
  }

  /* 动画结束 */
  60% {
    transform: translateX(-33%);
  }

  90% {
    transform: translateX(-67%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes p1 {

  /* 动画开始 */
  0% {
    width: 0%;
  }

  30% {
    width: 100%;
  }

  60% {
    width: 100%;
  }

  90% {
    width: 100%;
  }

  100% {
    width: 100%;
  }
}

@keyframes p2 {

  /* 动画开始 */
  0% {
    width: 0%;
  }

  30% {
    width: 0%;
  }

  60% {
    width: 100%;
  }

  90% {
    width: 100%;
  }

  100% {
    width: 100%;
  }
}

@keyframes p3 {

  /* 动画开始 */
  0% {
    width: 0%;
  }

  30% {
    width: 0%;
  }

  60% {
    width: 0%;
  }

  90% {
    width: 100%;
  }

  100% {
    width: 100%;
  }
}



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  position: relative;
  width: calc(var(--w) * 1px);
  height: 700px;
  margin: auto;
  overflow: hidden;
}

li {
  list-style: none;
}

.progress {
  position: absolute;
  width: 200px;
  height: 20px;
  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;
  width: 100%;
  height: 100%;
  border-radius: 2px;

}

.progress ul li:first-child em {
  animation: p1;
  animation: p1 calc(var(--speed) * var(--s)) infinite;
}

.progress ul li:nth-child(2) em {
  animation: p2;
  animation: p2 calc(var(--speed) * var(--s)) infinite;
}

.progress ul li:nth-child(3) em {
  animation: p3;
  animation: p3 calc(var(--speed) * var(--s)) infinite;
}

.md {
  width: calc(var(--w) * 3px);
  height: 700px;
  animation: move calc(var(--speed) * var(--s)) infinite;
}

img {
  width: calc(var(--w) * 1px);
  height: 700px;
}

.md .one,
.two,
.three {
  float: left;
  color: white;
  width: calc(var(--w) * 1px);
  height: 700px;
  position: relative;
  font: 36px 'Microsoft Yahei';
  font-weight: 700;
}

.two,
.three {
  color: #000;
}

h2 {
  background-color: transparent;
  position: absolute;
  top: 30%;
  left: 45%;
}

.span1 {
  background-color: transparent;
  position: absolute;
  top: 45%;
  left: 40%;
  font-weight: 400;
  font: 24px 'Microsoft Yahei';
}

.span2 {
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 45%;
  font-weight: 400;
  font: 24px 'Microsoft Yahei';
}

.span3 {
  background-color: transparent;
  position: absolute;
  top: 45%;
  left: 40%;
  font-weight: 400;
  font: 24px 'Microsoft Yahei';
}

.three h2 {
  background-color: transparent;
  position: absolute;
  top: 30%;
  left: 35%;
  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>

轮播图完整样例 纯CSS版本

轮播图完整样例纯CSS版本