<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body{ background-color: #000; } :root { --accent: hsl(10 90% 50%); } @layer scroller { .scroller { width: 300px; height: 300px; overflow: auto; margin: 10vh auto 0; position: relative; overflow-x: hidden; padding: 0.75rem; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; /* border: 1px solid #ddf; */ color: #fff; } } @layer mask { .scroller { --mask-width: 100%; --mask-size:120; --mask-range:120; mask: linear-gradient(#000, #0000) 0 0 / var(--mask-width) calc( (var(--scroll-progress-top, 0) / 100) * (var(--mask-size) * 1px) ) no-repeat, linear-gradient(#000, #000) 0 50% / 100% 100% no-repeat, linear-gradient(#0000, #000) 0 100% / var(--mask-width) calc( ((100 - var(--scroll-progress-bottom, 100)) / 100) * (var(--mask-size) * 1px) ) no-repeat; mask-composite: exclude; } [data-mask-bar="false"] .scroller { --mask-width: calc(100% - 10px); } [data-trigger="true"] .scroller { transition: mask-size 0.25s linear( 0 0%, 0.0027 3.64%, 0.0106 7.29%, 0.0425 14.58%, 0.0957 21.87%, 0.1701 29.16%, 0.2477 35.19%, 0.3401 41.23%, 0.5982 55.18%, 0.7044 61.56%, 0.7987 68.28%, 0.875 75%, 0.9297 81.25%, 0.9687 87.5%, 0.9922 93.75%, 1 100% ); } @supports (animation-timeline: scroll()) { .scroller { scroll-timeline: --scroller; mask: linear-gradient(white, transparent) 0 0 / var(--mask-width) 0 no-repeat, linear-gradient(white, white) 0 50% / 100% 100% no-repeat, linear-gradient(transparent, white) 0 100% / var(--mask-width) calc(var(--mask-size) * 1px) no-repeat; mask-composite: exclude; mask-repeat: none; animation: mask-up both linear, mask-down both linear; animation-timeline: scroll(self); animation-range: 0 calc(var(--mask-range) * 1px), calc(100% - (var(--mask-range) * 1px)) 100%; } @keyframes mask-up { 100% { mask-size: var(--mask-width) calc(var(--mask-size) * 1px), 100% 100%, var(--mask-width) calc(var(--mask-size) * 1px); } } @keyframes mask-down { 100% { mask-size: var(--mask-width) calc(var(--mask-size) * 1px), 100% 100%, var(--mask-width) 0; } } @property --trigger-up { initial-value: 0; inherits: true; syntax: "<integer>"; } @property --trigger-down { initial-value: 1; inherits: true; syntax: "<integer>"; } [data-trigger="true"] { timeline-scope: --scroller; } [data-trigger="true"] .resizer { animation: trigger-up both linear, trigger-down both linear; animation-timeline: --scroller; animation-range: 0 calc(var(--mask-range) * 1px), calc(100% - (var(--mask-range) * 1px)) 100%; } [data-trigger="true"] .scroller { animation: none; mask: linear-gradient(white, transparent) 0 0 / var(--mask-width) calc(var(--trigger-up, 0) * (var(--mask-size) * 1px)) no-repeat, linear-gradient(white, white) 0 50% / 100% 100% no-repeat, linear-gradient(transparent, white) 0 100% / var(--mask-width) calc(var(--trigger-down, 0) * (var(--mask-size) * 1px)) no-repeat; mask-composite: exclude; mask-repeat: none; } @keyframes trigger-up { 100% { --trigger-up: 1; } } @keyframes trigger-down { 100% { --trigger-down: 0; } } } } </style> </head> <body> <section class="scroller"> <h1>我当方士那些年</h1> 聚魂术在邪术当中算最为霸道的一种道法，是茅山正统道法的一种分支，原用于招魂聚魄超度亡人，但如果聚魂而不散留为己用，一旦阴魂聚集达到一定程度，就会拥有召唤阴神的能力。 但聚魂术极难修炼，最主要的原因是招魂阴魂需要极高的道法，控住不住会反受其害，另一个是要折损阳寿。 欧阳错借苏冷月之手，迫使我召唤五方阴兵，欧阳错交给苏冷月的金刚降魔杵却能镇魂聚魄，无形中我帮他把聚魂术修炼中两个最难的环节都解决了。 我的手里紧紧握着树枝，事实上我知道，自己其实无能为力，就算孔观是蛊王，蛊毒是阴物但面对现在的欧阳错根本没有任何作用。 欧阳错请幽阴神上身，如今站在面前的是幽冥将军，法术有岂是常人能及，这里根本没有任何一个人可以和他一较高下。 我向前走了一步，我知道自己不是欧阳错的对手，正想着该如何应对，就听见身后地上枯枝不断被踩断的声音。 卫羽左手双指合一，放于眉间，嘴唇不停蠕动，像是在念什么，抬起的左脚在地上用力踩踏，孔观摇了摇手示意其他人都退开，我看着卫羽的动作一愣，惊讶的小声自言自语。 “卫羽竟然会如此高深的道法？！” 孔观面无表情的回头看看我一样，淡淡地说。 “我和卫老头也悠闲了十几年，今天我为一个不知天高地厚的女人脏了手，卫老头也不能闲着，都在一边看好戏吧。” 我听孔观这么一说，心里暗暗想，孔观能辅佐古啸天一统江湖，其蛊术自然了得，可孔观和卫羽被称为天哑地瞎，天为尊、地仰之，很显然天哑在地瞎之上，我有些诧异地看着卫羽。 </section> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 滚动阴影 喜欢 (0)or分享 (0)
