js+css实现滚动式上下模糊渐变图片列表效果代码-html代码-BFW代码库

js+css实现滚动式上下模糊渐变图片列表效果代码

代码语言：html

代码描述：js+css实现滚动式上下模糊渐变图片列表效果代码，可调节模糊程度、色相等参数。

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

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

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

  
  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Special+Elite&display=swap');
@import url('https://unpkg.com/normalize.css') layer(normalize);
/* @import 'normalize.css' layer(normalize); */

@layer normalize, base, demo, blurring, debug;

@layer blurring {
  :root {
    --layers: 5;
    --blur-max: 40;
    --mask-stop: 25;
  }
  .blur {
    div {
      --blur: calc(
        sin(((var(--layers) - var(--i)) / var(--layers)) * 90deg) *
          var(--blur-max)
      );
      --stop: calc(
        sin(((var(--i)) / var(--layers)) * 90deg) * var(--mask-stop)
      );
      /* inverted */
      /* --stop: calc(
        var(--mask-stop) - sin(((var(--i) - 1) / var(--layers)) * 90deg) *
          var(--mask-stop)
      ); */
      position: absolute;
      inset: 0;

      &::after {
        content: '';
        position: absolute;
        inset: 0 -250%;
        -webkit-backdrop-filter: blur(calc(var(--blur) * 1px));
                backdrop-filter: blur(calc(var(--blur) * 1px));
        -webkit-mask: linear-gradient(
          180deg,
          #0000 0 calc((100 - var(--stop)) * 1%),
          #000 100%
        );
                mask: linear-gradient(
          180deg,
          #0000 0 calc((100 - var(--stop)) * 1%),
          #000 100%
        );
      }

      &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(var(--stop) * 1%);
        z-index: 20000;
      }
    }
  }
}

@layer debug {
  .blur::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .label {
    grid-area: 1 / 2;
    position: sticky;
    top: 0;
    height: 100vh;
    opacity: 0;
    transition: opacity 0.26s ease-out;
  }

  .label::after {
    content: 'blur overlay';
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 0.25rem;
    background: hsl(0 90% 50%);
    font-family: 'Special Elite', system-ui;
    text-shadow:.........完整代码请登录后点击上方下载按钮下载查看