奇乐网
寻梦xunm
纯CSS实现的滚动指示器效果
css代码
body {
position: relative;
}
.indicator {
position: absolute;
top: 0; right: 0; left: 0; bottom: 0;
background: linear-gradient(to right top, teal 50%, transparent 50%) no-repeat;
background-size: 100% calc(100% - 100vh);
z-index: 1;
pointer-events: none;
mix-blend-mode: darken;
}
.indicator::after {
content: '';
position: fixed;
top: 5px; bottom: 0; right: 0; left: 0;
background: #fff;
z-index: 1;
}

html代码
<!-- 在<body>标签内插入指示器元素 -->
<div class="indicator"></div>

原理
使用mix-blend-mode:darken改进实现

文章来源:https://www.usuuu.com/article/xGHzfkys
一言不合就认怂
1.34k 20年08月 日常
你觉得对您有所帮助请打赏一点吧。 支付宝:
微信:
目前还没有网友点评过本篇文章