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 .........完整代码请登录后点击上方下载按钮下载查看