div+css实现全屏图文鼠标滚动幻灯片切换动画效果代码-html代码-BFW代码库

div+css实现全屏图文鼠标滚动幻灯片切换动画效果代码

代码语言：html

所属分类：幻灯片

代码描述：div+css实现全屏图文鼠标滚动幻灯片切换动画效果代码

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

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

<head>
  <meta charset="UTF-8">

    <link rel="canonical" href="https://codepen.io/thebabydino/pen/rNqPGMM">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:wght@400;700&display=swap" rel="stylesheet">
  
  
  
<style>
@property --k {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -ms-scroll-snap-type: mandatory;
      scroll-snap-type: mandatory;
  -ms-scroll-snap-points-y: repeat(100vh);
      scroll-snap-points-y: repeat(100vh);
  -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
}

main, article, header {
  display: grid;
}

main {
  position: fixed;
  width: 100%;
  height: 100%;
  color: #dedede;
  -webkit-animation: k 1s linear forwards;
          animation: k 1s linear forwards;
  animation-timeline: scroll();
}
main::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(-75deg, transparent calc(50% - 2px), currentcolor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 2px));
  pointer-events: none;
  content: "";
}

article {
  --par: 0;
  --dif: var(--i) - var(--k);
  --bit: clamp(0, var(--dif), 1);
  --prv: clamp(0, var(--k) - var(--i), 1);
  grid-area: 1/1;
  grid-template-columns: 50% 50%;
  position: sticky;
  overflow: hidden;
  height: 100vh;
  text-align: center;
  filter: drop-shadow(0 0 2px #040404) drop-shadow(0 0 3px #040404);
  pointer-events: none;
}
article:nth-child(2n) {
  --par: 1 ;
}

@-webkit-keyframes k {
  to {
    --k: calc(var(--n) - 1) ;
  }
}

@keyframes k {
  to {
    --k: calc(var(--n) - 1) ;
  }
}
header, figure {
  --q: calc(1 - var(--p));
  --s: calc(2*var(--p) - 1);
  --x: 50vh*0.2679491924;
  grid-area: 1/calc(var(--p) + 1);
  margin: 0 calc(var(--q)*-1*var(--x)) 0 calc(var(--p)*-1*var(--x));
  translate: calc(var(--bit)*var(--s)*2*var(--x)) calc(var(--bit)*var(--s)*-100%);
  -webkit-clip-path: polygon(calc(var(--p)*2*var(--x)) 0, 100% 0, calc(100% - var(--q)*2*var(--x)) 100%, 0 100%);
          clip-path: polygon(calc(var(--p)*2*var(--x)) 0, 100% 0, calc(100% - var(--q)*2*var(--x)) 100%, 0 100%);
  transition: translate 1s ease-out;
  pointer-events: auto;
}

header {
  --p: calc(1 - var(--par));
  grid-gap: 1em;
  padding: 0 calc(var(--q)*var(--x)) 0 .........完整代码请登录后点击上方下载按钮下载查看