css+div实现页面滚动文字渐显效果代码-html代码-BFW代码库

代码语言：html

代码描述：css+div实现页面滚动文字渐显效果代码

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

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

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

  
<style>
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@600&family=Shantell+Sans:ital,wght,BNCE,INFM@0,300..800,100,100;1,300..800,100,100&display=swap");
@property --k {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
* {
  margin: 0;
}

html, body, header, article {
  display: grid;
}

html {
  scrollbar-color: #f7b267 #212121;
}

body {
  color: #ededed;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #1a1a1a;
  filter: url(#grainy);
  content: "";
}

header, article, footer {
  grid-gap: 1em;
  justify-self: center;
  place-content: center;
  padding: min(4%, 1em);
  max-width: 25em;
  min-height: 100vh;
  font: clamp(1.5em, 6vmin, 12.5em)/1.125 inconsolata, sans-serif;
  text-wrap: balance;
}

header, h3 {
  color: #f25c54;
  font-family: shantell sans, cursive;
  text-align: center;
}

h2 {
  color: #f7b267;
  font-size: 1.75em;
}

em {
  display: block;
  font-size: 0.75em;
  font-weight: 100;
}

h3 {
  font-size: 1.375em;
}

a {
  color: #ffb703;
}

p {
  --k: calc(-1*(var(--m) + 1));
  animation: k steps(calc(var(--n) + var(--m) + 1)) both;
  animation-timeline: view();
  animation-range: entry 50% cover 50%;
}

@keyframes k {
  to {
    --k: var(--n) ;
  }
}
span {
  overflow: hidden;
  background: linear-gradient(#00f 0 0) text, linear-gradient(90deg, red calc(var(--k)*1ch), #000 calc((var(--k) + var(--m) + 1)*1ch)), linear-gradient(#000, #0f0);
  background-blend-mode: lighten;
  color: #0000;
}

footer p {
  font: 0.625em shantell sans;
}

/* styling support info boxes */
aside {
  position: fixed;
  /* prevent it from scrolling */
  inset: 0 0 auto;
}

.box {
  margin: 1em;
  border-left: solid 5px #dc3055;
  padding: 1em;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.35);
  background: #851d40;
  color: #fff;
  font: 1.25em/1.25 ubuntu, trebuchet ms, arial, sans-serif;
}
@supports (animation-range: entry 0% exit 0%) {
  .box {
    display: none;
  }
}

code {
  padding: 2px;
  background: rgba(0, 0, 0, 0.35);
  font: 1.1em/1.2 ubuntu mono, consolas, monaco, monospace;
}
</style>

  
  
</head>


  <body style="--n: 246; --m: 10">
  <svg width="0" height="0">
    <filter id="grainy" color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="1.73"></feTurbulence>
      <feColorMatrix type="saturate" values="0"></feColorMatrix>
      <feBlend in="SourceGraphic" mode="multiply"></feBlend>
    </filter>
    <filter id="reveal-0" color-interpolation-filters="sRGB">
      <feColorMatrix values="0 0 0 0 0 
			                      0 0 0 0 0 
														0 0 0 0 0 
														1 0 0 0 0"></feColorMatrix>
      <feComponentTransfer result="alphamap">
        <feFuncA type="discrete" tableValues="0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1"></feFuncA>
      </feComponentTransfer>
      <feColorMatrix in="SourceGraphic" values="0 0 0 0 1 
														0 0 0 0 1 
														0 0 0 0 1 
														0 0 1 0 0"></feColorMatrix>
      <feComposite in2="alphamap" operator="in"></feComposite>
    </filter>
    <filter id="reveal-1" color-interpolation-filters="sRGB" primitiveUnits="objectBoundingBox">
      <feColorMatrix values="0 0 0 0 1 
												0 0 0 0 1 
												0 0 0 0 1 
												0 0 1 0 0" result="basetext"></feColorMatrix>
      <feColorMatrix in="SourceGraphic" values="0 0 0 0 0 
												0 0 0 0 0 
												0 0 0 0 0 
												1 0 0 0 0" result="basegrad"></feColorMatrix>
      <feComponentTransfer>
        <feFuncA type="discrete" tableValues="0.2 0 0 0 0 0 0 0 0 0 0"></feFuncA>
      </feComponentTransfer>
      <feComposite in="basetext" operator="in"></feComposite>
      <feGaussianBlur stdDeviation="0.015" result="layer0"></feGaussianBlur>
      <feComponentTransfer in="basegrad">
        <feFuncA type="discrete" tableValues="0 0.28 0 0 0 0 0 0 0 0 0"></feFuncA>
      </feComponentTransfer>
      <feComposite in="basetext" operator="in"></feComposite>
      <feGaussianBlur stdDeviation="0.013500000000000002"></feGaussianBlur>
      <feBlend in="layer0" result="layer1"></feBlend>
      <feComponentTransfer in="basegrad">
        <feFuncA type="discrete" tableValues="0 0 0.36 0 0 0 0 0 0 0 0"></feFuncA>
      </feComponentTransfer>
      <feComposite in="basetext" operator="in"></feComposite>
      <feGaussianBlur stdDeviation="0.012"></feGaussianBlur>
      <feBlend in="layer1" result="layer2"></feBlend>
      <feComponentTransfer in="basegrad">
        <feFuncA type="discrete" tableValues="0 0 0 0.44000000000000006 0 0 0 0 0 0 0"></feFuncA>
      </feComponentTransfer>
      <feComposite in="basetext" operator="in"></feComposite>
      <feGaussianBlur stdDeviation="0.010499999999999999"></feGaussianBlur>
      <feBlend in="layer2" result="layer3"></feBlend>
      <feComponentTransfer in="basegrad">
        <feFuncA type="discrete" tableValues="0 0 0 0 0.52 0 0 0 0 0 0"></feFuncA>
      </feComponentTransfer>
      <feComposite in="basetext" operator="in"></feComposite>
      <feGaussianBlur stdDeviation="0.009"></feGaussianBlur>
      <feBlend in="layer3" result="layer4"></feBlend>
      <feComponentTransfer in="basegrad">
        <feFuncA type="discrete" tableValues="0 0 0 0 0 0.6000000000000001 0 0 0 0 0"></feFuncA>
      </feComponentTransfer>
      <feComposite in="basetext" operator="in"></feComposite>
      <feGaussianBlur stdDeviation="0.0075"></feGaussianBlur>
      <feBlend in="layer4" result="layer5"></feBlend>
      <feComponentTransfer in="basegrad">
        <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0.6800000000000002 0 0 0 0"></feFuncA>
      </feComponentTransfer>
      <feComposite in="basetext" operator="in"></feComposite>
      <feGaussianBlur stdDeviation="0.006"></feGaussianBlur>
      <feBlend in="layer5" result="layer6"></feBlend>
      <feComponentTransfer in="basegrad">
        <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0.76 0 0 0"></feFuncA>
      </feComponentTransfer>
      <feComposite in="basetext" operator="in"></feComposite>
      <feGaussianBlur stdDeviation="0.0045"></feGaussianBlur>
      <feBlend in="layer6" result="layer7"></feBlend>
      <feComponentTransfer in="basegrad">
        <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0.8400000000000001 0 0"></feFuncA>
      </feComponentTransfer>
      <feComposite in="basetext" operator="in"></feComposite>
      <feGaussianBlur stdDeviation="0.003"></feGaussianBlur>
      <feBlend in="layer7" result="layer8"></feBlend>
      <feComponentTransfer in="basegrad">
        <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0.9199999999999999 0"></feFuncA>
      </feComponentTransfer>
      <feComposite in="basetext" operator="in"></feComposite>
      <feGaussianBlur stdDeviation="0.0015"></feGaussianBlur>
      <feBlend in="layer8" result="layer9"></feBlend>
      <feComponentTransfer in="basegrad">
        <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 1"></feFuncA>
      </feComponentTransfer>
      <feComposite in="basetext" operator="in"></feComposite>
      <feGaussianBlur stdDeviation="0"></feGaussianBlur>
      <feBlend in="layer9" result="layer10"></feBlend>
    </filter>
    <filter id="reveal-2" color-interpolation-filters="sRGB" primitiveUnits="object.........完整代码请登录后点击上方下载按钮下载查看