css+div实现页面滚动文字渐显效果代码
代码语言: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="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 in="basegrad"> <feFuncA type="discrete" tableValues="0 0 0.2 0 0 0 0 0 0 0 0"></feFuncA> </feComponentTransfer> <feComposite in="basetext" operator="in"></feComposite> <feGaussianBlur stdDeviation="0.008"></feGaussianBlur> <feBlend in="layer1" result="layer2"></feBlend> <feComponentTransfer in="basegrad"> <feFuncA type="discrete" tableValues="0 0 0 0.3 0 0 0 0 0 0 0"></feFuncA> </feComponentTransfer> <feComposite in="basetext" operator="in"></feComposite> <feGaussianBlur stdDeviation="0.007000000000000001"></feGaussianBlur> <feBlend in="layer2" result="layer3"></feBlend> <feComponentTransfer in="basegrad"> <feFuncA type="discrete" tableValues="0 0 0 0 0.4 0 0 0 0 0 0"></feFuncA> </feComponentTransfer> <feComposite in="basetext" operator="in"></feComposite> <feGaussianBlur stdDeviation="0.006"></feGaussianBlur> <feBlend in="layer3" result="layer4"></feBlend> <feComponentTransfer in="basegrad"> <feFuncA type="discrete" tableValues="0 0 0 0 0 0.5 0 0 0 0 0"></feFuncA> </feComponentTransfer> <feComposite in="basetext" operator="in"></feComposite> <feGaussianBlur stdDeviation="0.005"></feGaussianBlur> <feBlend in="layer4" result="layer5"></feBlend> <feComponentTransfer in="basegrad"> <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0.6 0 0 0 0"></feFuncA> </feComponentTransfer> <feComposite in="basetext" operator="in"></feComposite> <feGaussianBlur stdDeviation="0.004"></feGaussianBlur> <feBlend in="layer5" result="layer6"></feBlend> <feComponentTransfer in="basegrad"> <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0.7 0 0 0"></feFuncA> </feComponentTransfer> <feComposite in="basetext" operator="in"></feComposite> <feGaussianBlur stdDeviation="0.003"></feGaussianBlur> <feBlend in="layer6" result="layer7"></feBlend> <feComponentTransfer in="basegrad"> <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0.8 0 0"></feFuncA> </feComponentTransfer> <feComposite in="basetext" operator="in"></feComposite> <feGaussianBlur stdDeviation="0.002"></feGaussianBlur> <feBlend in="layer7" result="layer8"></feBlend> <feComponentTransfer in="basegrad"> <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0.9 0"></feFuncA> </feComponentTransfer> <feComposite in="basetext" operator="in"></feComposite> <feGaussianBlur stdDeviation="0.001"></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-3" 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 .5 0 0 0 0 0 0 1 0 0 0" result="vertdmap"></feColorMatrix> <feComponentTransfer result="vertrect"> <feFuncA type="discrete" tableValues="0 1 0"></feFuncA> </feComponentTransfer> <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 result="cell0"> <feFuncA type="discrete" tableValues="1 0 0 0 0 0 0 0 0 0 0"></feFuncA> </feComponentTransfer> <feComposite in="basetext" operator="in"></feComposite> <feDisplacementMap in2="vertdmap" scale="0.15" xChannelSelector="G" result="displace"></feDisplacementMap> <feMorphology in="vertrect" operator="dilate" radius="0 0"></feMorphology> <feComposite in="displace" operator="in"></feComposite> <feComposite in2="cell0" operator="in"></feComposite> <feGaussianBlur stdDeviation="0.02 0.002" result="layer0"></feGaussianBlur> <feComponentTransfer in="basegrad" result="cell1"> <feFuncA type="discrete" tableValues="0 1 0 0 0 0 0 0 0 0 0"></feFuncA> </feComponentTransfer> <feComposite in="basetext" operator="in"></feComposite> <feDisplacementMap in2="vertdmap" scale="0.13499999999999998" xChannelSelector="G" result="displace"></feDisplacementMap> <feMorphology in="vertrect" operator="dilate" radius="0 0.02"></feMorphology> <feComposite in="displace" operator="in"></feComposite> <feComposite in2="cell1" operator="in"></feComposite> <feGaussianBlur stdDeviation="0.018 0.0018000000000000002"></feGaussianBlur> <feBlend in="layer0" result="layer1"></feBlend> <feComponentTransfer in="basegrad" result="cell2"> <feFuncA type="discrete" tableValues="0 0 1 0 0 0 0 0 0 0 0"></feFuncA> </feComponentTransfer> <feComposite in="basetext" operator="in"></feComposite> <feDisplacementMap in2="vertdmap" scale="0.12" xChannelSelector="G" result="displace"></feDisplacementMap> <feMorphology in="vertrect" operator="dilate" radius="0 0.04"></feMorphology> <feComposite in="displace" operator="in"></feComposite> <feComposite in2="cell2" operator="in"></feComposite> <feGaussianBlur stdDeviation="0.016 0.0016"></feGaussianBlur> <feBlend in="layer1" result="layer2"></feBlend> <feComponentTransfer in="basegrad" result="cell3"> <feFuncA type="discrete" tableValues="0 0 0 1 0 0 0 0 0 0 0"></feFuncA> </feComponentTransfer> <feComposite in="basetext" operator="in"></feComposite> <feDisplacementMap in2="vertdmap" scale="0.10500000000000001" xChannelSelector="G" result="displace"></feDisplacementMap> <feMorphology in="vertrect" operator="dilate" radius="0 0.06000000000000001"></feMorphology> <feComposite in="displace" operator="in"></feComposite> <feComposite in2="cell3" operator="in"></feComposite> <feGaussianBlur stdDeviation="0.014000000000000002 0.0014"></feGaussianBlur> <feBlend in="layer2" result="layer3"></feBlend> <feComponentTransfer in="basegrad" result="cell4"> <feFuncA type="discrete" tableValues="0 0 0 0 1 0 0 0 0 0 0"></feFuncA> </feComponentTransfer> <feComposite in="basetext" operator="in"></feComposite> <feDisplacementMap in2="vertdmap" scale="0.09" xChannelSelector="G" result="displace"></feDisplacementMap> <feMorphology in="vertrect" operator="dilate" radius="0 0.08"></feMorphology> <feComposite in="displace" operator="in"></feComposite> <feComposite in2="cell4" operator="in"></feComposite> <feGaussianBlur stdDeviation="0.012 0.0012000000000000001"></feGaussianBlur> <feBlend in="layer3" result="layer4"></feBlend> <feComponentTransfer in="basegrad" result="cell5"> <feFuncA type="discrete" tableValues="0 0 0 0 0 1 0 0 0 0 0"></feFuncA> </feComponentTransfer> <feComposite in="basetext" operator="in"></feComposite> <feDisplacementMap in2="vertdmap" scale="0.075" xChannelSelector="G" result="displace"></feDisplacementMap> <feMorphology in="vertrect" operator="dilate" radius="0 0.1"></feMorphology> <feComposite in="displace" operator="in"></feComposite> <feComposite in2="cell5" operator="in"></feComposite> <feGaussianBlur stdDeviation="0.01 0.001"></feGaussianBlur> <feBlend in="layer4" result="layer5"></feBlend> <feComponentTransfer in="basegrad" result="cell6"> <feFuncA type="discrete" tableValues="0 0 0 0 0 0 1 0 0 0 0"></feFuncA> </feComponentTransfer> <feComposite in="basetext" operator="in"></feComposite> <feDisplacementMap in2="vertdmap" scale="0.06" xChannelSelector="G" result="displace"></feDisplacementMap> <feMorphology in="vertrect" operator="dilate" radius="0 0.12000000000000002"></feMorphology> <feComposite in="displace" operator="in"></feComposite> <feComposite in2="cell6" operator="in"></feComposite> <feGaussianBlur stdDeviation="0.008 0.0008"></feGaussianBlur> <feBlend in="layer5" result="layer6"></feBlend> <feComponentTransfer in="basegrad" result="cell7"> <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 1 0 0 0"></feFuncA> </feComponentTransfer> <feComposite in="basetext" operator="in"></feComposite> <feDisplacementMap in2="vertdmap" scale="0.045" xChannelSelector="G" result="displace"></feDisplacementMap> <feMorphology in="vertrect" operator="dilate" radius="0 0.14"></feMorphology> <feComposite in="displace" operator="in"></feComposite> <feComposite in2="cell7" operator="in"></feComposite> <feGaussianBlur stdDeviation="0.006 0.0006000000000000001"></feGaussianBlur> <feBlend in="layer6" result="layer7"></feBlend> <feComponentTransfer in="basegrad" result="cell8"> <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 1 0 0"></feFuncA> </feComponentTransfer> <feComposite in="basetext" operator="in"></feComposite> <feDisplacementMap in2="vertdmap" scale="0.03" xChannelSelector="G" result="displace"></feDisplacementMap> <feMorphology in="vertrect" operator="dilate" radius="0 0.16"></feMorphology> <feComposite in="displace" operator="in"></feComposite> <feComposite in2="cell8" operator="in"></feComposite> <feGaussianBlur stdDeviation="0.004 0.0004"></feGaussianBlur> <feBlend in="layer7" result="layer8"></feBlend> <feComponentTransfer in="basegrad" result="cell9"> <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 1 0"></feFuncA> </feComponentTransfer> <feComposite in="basetext" operator="in"></feComposite> <feDisplacementMap in2="vertdmap" scale="0.015" xChannelSelector="G" result="displace"></feDisplacementMap> <feMorphology in="vertrect" operator="dilate" radius="0 0.18"></feMorphology> <feComposite in="displace" operator="in"></feComposite> <feComposite in2="cell9" operator="in"></feComposite> <feGaussianBlur stdDeviation="0.002 0.0002"></feGaussianBlur> <feBlend in="layer8" result="layer9"></feBlend> <feComponentTransfer in="basegrad" result="cell10"> <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 1"></feFuncA> </feComponentTransfer> <feComposite in="basetext" operator="in"></feComposite> <feDisplacementMap in2="vertdmap" scale="0" xChannelSelector="G" result="displace"></feDisplacementMap> <feMorphology in="vertrect" operator="dilate" radius="0 0.2"></feMorphology> <feComposite in="displace" operator="in"></feComposite> <feComposite in2="cell10" operator="in"></feComposite> <feGaussianBlur stdDeviation="0 0"></feGaussianBlur> <feBlend in="layer9" result="layer10"></feBlend> </filter> <filter id="reveal-4" 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 .5 0 0 0 0 0 0 1 0 0 0" result="vertdmap"></feColorMatrix> <feComponentTransfer result="vertrect"> <feFuncA type="discrete" tableValues="0 1 0"></feFuncA> </feComponentTransfer> <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 in="basegrad" result="cell1"> <feFuncA type="discrete" tableValues="0 0.1 0 0 0 0 0 0 0 0 0"></feFuncA> </feComponentTransfer> <feComposite in="basetext" operator="in"></feComposite> <feDisplacementMap in2="vertdmap" scale="0.09" yChannelSelector="G" result="displace"></feDisplacementMap> <feMorphology in="vertrect" operator="dilate" radius="0 0.02"></feMorphology> <feComposite in="displace" operator="in" result="innercut"></feComposite> <feMorphology in="cell1" operator="dilate" radius=".5 0"></feMorphology> <feComposite in="innercut" operator="in"></feComposite> <feGaussianBlur stdDeviation="0.009"></feGaussianBlur> <feBlend in="layer0" result="layer1"></feBlend> <feComponentTransfer in="basegrad" result="cell2"> <feFuncA type="discrete" tableValues="0 0 0.2 0 0 0 0 0 0 0 0"></feFuncA> </feComponentTransfer> <feComposite in="basetext" operator="in"></feComposite> <feDisplacementMap in2="vertdmap" scale="0.08" yChannelSelector="G" result="displace"></feDisplacementMap> <feMorphology in="vertrect" operator="dilate" radius="0 0.04"></feMorphology> <feComposite in="displace" .........完整代码请登录后点击上方下载按钮下载查看
网友评论0