纯css实现轮播图效果

css实现轮播及聚光灯效果

查看代码

图片轮播好实现，关键点是下面小圆圈的激活样式
图片通过css animation 设置steps 及偏移效果动画实现
小圆圈通过animation steps 和 clip-path动画实现

html:

<div class="carousel-pic">
    <div class="img-container">
        <center class="img">111</center>
        <center class="img">222</center>
        <center class="img">333</center>
    </div>
</div>
<div class="tip-container">
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <div class="active"></div>
</div>

css

.carousel-pic {
    margin: auto;
    width: 500px;
    height: 200px;
    border: 1px solid #000;
    overflow: hidden;
}
.img-container {
    width: max-content;
    animation: carousel-animate 3s infinite steps(3);
}
@keyframes carousel-animate {
  0% {
      transform: translateX(0px);
  }
  100% {
      transform: translateX(-100%);
  }
}
.img {
    display: inline-block;
    width: 500px;
    height: 200px;
}
.circle {
    display: inline-block;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #1B2A47;
    vertical-align: middle;
}
.tip-container {
  margin: auto;
  width: max-content;
  position: relative;
}
.circle +.circle {
    margin-left: 12px;
}
.active {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #929BAD;
    animation: spotlight 3s infinite steps(3,jump-none);
}
@keyframes spotlight {
    0% {
        clip-path: circle(10px at 10px 52%);
    }
    100% {
        clip-path: circle(10px at calc(100% - 10px) 52%);
    }
}