div+css实现网页滚动彩色蜡笔换色代码-html代码-BFW代码库

div+css实现网页滚动彩色蜡笔换色代码

代码语言：html

代码描述：div+css实现网页滚动彩色蜡笔换色代码

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

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

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

  
<style>
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  overflow: hidden;
}

ul {
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 0;
  margin-block: 0;
  margin-inline: auto;
  text-align: center;
  width: 100%;
  list-style: none;
  -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
}

li {
  position: relative;
  display: grid;
  place-content: center;
  height: 100vh;
  scroll-snap-align: center;

  /* Background color */
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color);
    opacity: 0.8;
  }
}

div {
  --wrap-color: hsla(0 0% 100% / 0.9);
  --shadow: hsla(0 0% 0% / 0.1);
  --width: 50vw;
  --height: calc(var(--width) / 8);
  --tip-width: 8vw;
  display: flex;
  align-items: center;
  position: relative;
  isolation: isolate;
  overflow-y: clip;
  left: calc(var(--tip-width) / 2);
  width: var(--width);
  height: var(--height);
  background: var(--color, CanvasText);
  background-image: linear-gradient(to bottom, transparent, var(--shadow)),
    linear-gradient(
      to bottom,
      transparent 5%,
      hsla(0 0% 100% / 0.25) 37%,
      transparent 85%
    );

  /* Tip */
  &::before {
    content: "";
    position: absolute;
    display: block;
    top: 1px;
    right: calc(100% - 1px);
    width: var(--tip-width);
    height: calc(var(--height) - 2px);
    background-color: var(--color);
    background-image: linear-gradient(to bottom, transparent, var(--shadow)),
      linear-gradient(
        to bottom,
        transparent 5%,
        hsla(0 0% 100% / 0.25) 34%,
        transparent 75%
      );
    -webkit-clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%);
            clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%);
    z-index: -1;
  }

  /* Wrapper */
  &::after {
    --stripe-color: hsla(0 0% 0% / 0.8);
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    height: 100%;
    background-color: var(--wrap-color);
    background-image: linear-gradient(
        to bottom,
        transparent 5%,
        hsl.........完整代码请登录后点击上方下载按钮下载查看