巧用暗影、mask以及css变量来实现元素聚焦成果

前言

嘿，之前我如同有段时间没写博客了。其实最大的起因就是我变得有点懒了。不过，当初毕业快到了，我也不能始终偷懒上来啊。对我来说，抉择写代码作为职业方向是一件好玩的事件，而在此方向上，继续学习是最重要的事件之一。写博客就是一种十分好的形式来帮忙本人继续学习，并且能够当作本人的成长记录，回味无穷。

最近遇到了一个这样的需要，有一个音讯列表，心愿能够在某条音讯中实现聚焦，即除了应该聚焦的音讯外的音讯都会被一个黑蒙蒙的遮罩所遮住。

那么遇到这种不常见的需要，咱们首先就须要思考技术计划。

技术计划

1.Mask遮罩

我最开始想到的是通过应用CSS突变以及遮罩的形式来实现。

具体思路如下，首先利用IntersectionObserver监听指定元素，如果它进入视图中，就能够将其top、height属性以「CSS变量」的形式赋值给Mask元素，Mask即可通过CSS变量的形式进行突变计算，从而最终显示出聚焦成果。

整个HTML文档构造如下：

<div class="box"> // 滚动列表盒子    <ul class="list"> // 列表盒子，利用after伪元素来实现遮罩      <li class="item">1</li>      <li class="item">2</li>      <li class="item">3</li>      <li class="item">4</li>      <li class="item">5</li>      <li class="item">6</li>      <li class="item">7</li>      <li class="item">8</li>      <li class="item">9</li>      <li class="item" id="target">10 (target)</li> // 须要聚焦的元素      <li class="item">11</li>      <li class="item">12</li>      <li class="item">13</li>    </ul>  </div>

JS代码的次要作用其实就是去监听指标元素的显示，从而切换遮罩显示：

 const intersectionObserver = new IntersectionObserver((entries) => {    const entry = entries[0]    if (!entry) return    const Mask = document.querySelector('.list')    if (entry.isIntersecting) {      // 可视畛域      const rect = entry.boundingClientRect      const { height } = rect      Mask.style.setProperty('--height', height + 'px')      Mask.style.setProperty('--top', entry.target.offsetTop + 'px')    } else {    // 不显示，则设置突变令其通明      Mask.style.setProperty('--height', entry.rootBounds.height + 'px')      Mask.style.setProperty('--top', 0 + 'px')    }  });  // 开始监听  intersectionObserver.observe(document.querySelector('#target'));

咱们利用mask，即mask中不通明的局部会使得背景图被遮住的个性来管制遮罩的地位。

最要害的CSS变量计算外围代码如下：

.list::after {      content: '';      position: absolute;      left: 0;      right: 0;      top: 0;      bottom: 0;      background-color: rgba(0, 0, 0, 0.46);      mask: linear-gradient(180deg, #000 calc(var(--top) -  var(--height)), transparent var(--top), #000 calc(var(--top) + 2 * var(--height)));    }

于是，一个简略的聚焦成果就实现啦～

最终成果能够点击利用mask和css变量实现元素聚焦性能所示

2.BoxShadow暗影遮罩

对于box-shadow属性，咱们可能都不太生疏，咱们常常用它来实现各种类3D的款式，例如按钮、卡片等组件中。然而，当咱们将box-shadow的扩散半径调成无限大的时候，它不就成为了一个最好用的遮罩了嘛？而且也并不会遮挡住指标元素。

「留神」:这里须要留神的是，box-shadow暗影会被后续相邻的元素所遮挡，这时能够配合绝对定位来解决。

这种形式与前者相比，代码量少得可不是一丁半点，具体的含糊成果能够依据具体须要来自行调节。

外围代码如下：

 .focus {      position: relative;      box-shadow: 0px 0px 28px 1000px rgba(0, 0, 0, 0.59);}
 const intersectionObserver = new IntersectionObserver((entries) => {    const entry = entries[0]    const target = entry.target    if (!entry) return    if (entry.isIntersecting) {      // 可视畛域      target.classList.add('focus')    } else {      target.classList.remove('focus')    }  });  // 开始监听  intersectionObserver.observe(document.querySelector('#target'));

最终成果能够点击利用暗影实现元素聚焦性能所示

总结

以上是两种利用CSS技术实现元素聚焦成果的计划。尽管这两种计划都是利用CSS的个性来达到遮罩的成果，然而它们的实现形式有所不同，对应的CSS属性和代码也有所区别。

对于应用mask遮罩的形式，须要利用CSS变量以及突变来管制遮罩的地位和成果，比拟实用于须要实现简单突变成果的场景；而对于应用box-shadow遮罩的形式，则绝对更加简略，代码量更小，比拟实用于一些简略的遮罩成果。

不过无论是哪种计划，它们都提供了一种新的思路和思考形式，让咱们在开发中更加灵便和高效地使用CSS技术。

我是<span style="color:#87481f;font-weight:bold">「盐焗乳鸽还要香锅」</span>，喜爱我的文章欢送关注噢

  • github 链接https://github.com/1360151219
  • 博客链接是 strk2.cn
  • 掘金账号、知乎账号、简书《盐焗乳鸽还要香锅》
  • 思否账号《天天摸鱼真的爽》