水滴粘性轮换指示点效果-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;
  justify-self: stretch;
  height: 50px;
  z-index:10;
  cursor: pointer;
}
div[data-no='1'] {
  grid-area: 1 / 1 / 2 / 2;
  height: 50px;
}
div[data-no='2'] {
  grid-area: 1 / 2 / 2 / 3;
}
div[data-no='3'] {
  grid-area: 1 / 3 / 2 / 4;
}
div[data-no='4'] {
  grid-area: 1 / 4 / 2 / 5;
}
div[data-no='5'] {
  grid-area: 1 / 5 / 2 / 6;
}

svg {
  width: 50vw;
  grid-area: 1 / 1 / 2 / 6;
}
.points {
  stroke: #ccc; 
  stroke-width: 8;
  stroke-dasharray: .0001px var(--dist);
  
  stroke-linecap: round ;
  stroke-dashoffset: var(--start);
}
.point {
  stroke: #512DA8; 
  stroke-width: 8;
  stroke-dasharray: .001px 100px;
  stroke-linecap: round ;
  stroke-dashoffset: calc( ( var(--cur-point) - 1 ) * var( --dist ) + var( --start ) );
  /* stroke-dasharray: 10px 100px;
  stroke-dashoffset: calc( ( var(--cur-point) - 1 ) * var( --dist ) + var( --start ) + 10px ); */
}
svg.activeNext .point {
  animation: aniNext .7s ease-in-out;
  stroke-dashoffset: calc( ( var(--point-to-go) - 1 ) * var( --dist ) + var( --start ) );
}
svg.activePrev .point {
  animation: aniPrev .7s ease-in-out;
  stroke-dashoffset: calc( ( var(--point-to-go) - 1 ) * var( --dist ) + var( --start ) );
}
@keyframes aniNext {
  0% {
    stroke-dashoffset: calc( ( var(--cur-point) - 1 ) * var( --dist ) + var( --start ) );
    stroke-dasharray: .001px 100px;
  }
  50% {
    stroke-dashoffset: calc( (( var(--point-to-go) - 1 ) * var( --dist ) + var( --start )) + (( var(--point-to-go) - var(--cur-point)) * 20px ) ) ;
    stroke-dasharray: calc(( var(--point-to-go) - var(--cur-point)) * 20px ) 100px;
  }
  100% {
    stroke-dashoffset: calc( ( var(--point-to-go) - 1 ) * var( --dist ) + var( --start ) ); 
    stroke-dasharray: .001px 100px;
  }
}
@keyframes aniPrev {
  0% {
    stroke-dashoffset: calc( ( var(--cur-point) - 1 ) * var( --dist ) + var( --start ) );
    stroke-dasharray: .001px 100px;
  }
  50% {
    stroke-dashoffset: calc( ( var(--cur-point) - 1 ) * var( --dist ) + var( --start ) + ( ( var(--cur-point) - var(--point-to-go) ) * 20px ) );
    stroke-dasharray: calc(( var(--cur-point) - var(--point-to-go) ) * 20px ) 100px;
  }
  100% {
    stroke-dashoffset: calc( ( var(--point-to-go) - 1 ) * var( --dist ) + var( --start ) ); 
    .........完整代码请登录后点击上方下载按钮下载查看