css的scroll-snap实现全屏上下滚动幻灯片效果代码-html代码-BFW代码库

css的scroll-snap实现全屏上下滚动幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：css的scroll-snap实现全屏上下滚动幻灯片效果代码，使用了css的scroll-snap-type、 scroll-snap-align及scroll-snap-stop属性实现。

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

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1">

<style>
body {
  font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
font-weight: 200;
  margin: 0;
}

.slides {
  --font-size: 10vh;
  --snap-height: 100vh;
  --snap-inline: 15px;
  --snap-bg1: #0f2027;
  --snap-bg2: #203a43;
  --snap-bg3: #f953c6;
  --snap-bg4: #b91d73;
  --snap-color: white;
  
  max-block-size: var(--snap-height);
  overflow-y: auto;
  scrollbar-color: var(--snap-bg4) var(--snap-bg2);  

  &::-webkit-scrollbar {
    inline-size: var(--snap-inline);
  }
  
  &::-webkit-scrollbar-thumb {
    background-color: var(--snap-bg4);
  }
  
  &::-webkit-scrollbar-track {
    background-color: var(--snap-bg2);
  }
}

.slides:after {
  content: "";
  display: block;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 1rem;
  block-size: 1rem;
  inline-size: 1rem;
  border-block-end: 1px solid var(--snap-bg3);
  border-inline-end: 1px solid var(--snap-bg3);
  transform: translateX(calc(var(--snap-inline) / -2 - 50%)) rotate(45deg);
  z-index: 1;
}

.slides div {
  box-sizing: border-box;
  background-color: #0f2027;
  background-image: linear-gradient(to left, var(--snap-bg1), var(--snap-bg2));
  block-size: var(--snap-height);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 10vmin;
}

.slides div:last-child {
  position: relative;
}

.slides div:last-child:before {
  content: "";
  display: block;
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  block-size: 2rem;
  background-image: linear-gradient(to left, var(--snap-.........完整代码请登录后点击上方下载按钮下载查看