水滴粘性轮换指示点效果-html代码-BFW代码库

水滴粘性轮换指示点效果

代码语言：html

所属分类：幻灯片

代码描述：水滴粘性轮换指示点效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root {
  --point-to-go: 1;
  --cur-point: 1;
  --dist: 20px;
  --start: 10px;
}
* {
  transition-property: transform, opacity;
  transition-duration: 600ms, 600ms;
  transition-timing-function: cubic-bezier(.5, 0, .5, 1);
}
.img {
  display: flex;
  width: 600px;
  height: 400px;
  margin-bottom: 30px;
  z-index:-1;
  overflow: hidden;
  filter: sepia(1) hue-rotate(180deg);
}
img {
  display: block;
    width: 600px;
    height: 400px;
    object-fit: cover;
    margin-right: -600px;
    opacity: 0;
    transform: translateX(-600px);
    transiton: all .5s ease;
  }
 img.active {
   opacity:1;
   transform: translateX(0);
   transiton: all .5s ease;
  }
img.active ~img {
    opacity: 0;
    transform: translateX(600px);
  }




body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
}
div.container {
  width: 50vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
}
div.ptn {
  align-self: stretch;
 .........完整代码请登录后点击上方下载按钮下载查看