村里唯一的希望

网页设计群:706684

Album
纯CSS实现的滚动指示器效果
  css     2020-01-10     45     0

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改进实现

css
最新评论
  • 脑婆最大!!! 2020年01月25日
    我的城市缺个你
  • 小生不才 2020年01月19日
    好好看的个人博客

  • @_@、 2020年01月18日
    你的评论功能,指自己写的代码吗
  • me 2020年01月18日
    这设计真好看,想知道是做ux的吗
  • 悠悠 2020年01月17日
    可有可无 不打算加了
  • 唤( . )醒 2020年01月17日
    视频列表 点击封面不能跳转
  • A 王小五 2020年01月10日
    挡着没有用,我都看到了!
  • 演员 2020年01月10日
    友联-.-
  • 悠悠 2020年01月10日
    就用用嘛
  • 唤( . )醒 2020年01月10日
    用我的主题壁纸