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

代码语言:html

所属分类:幻灯片

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

代码标签: css scroll-snap 实现 全屏 上下 滚动 幻灯片

下面为部分代码预览,完整代码请点击下载或在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);
  transfo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0