bczFE / articles

📚 百词斩前端写文章的地方
8 stars 1 forks source link

分界变色效果 #6

Open gaoryrt opened 6 years ago

gaoryrt commented 6 years ago

这个不好描述,看图:

oct-30-2018 10-33-19

或者是到原网站看右上方

首先想到的还是不同的 filter 来对 nav 进行颜色 filter 右键看了下,原来是每个 section 都有对应颜色的 nav,用 clip 进行蒙版的操作

gaoryrt commented 6 years ago

大概是这样:

<section>
    <i class="_red"></i>
</section>
<section>
    <i class="_blue"></i>
</section>
<section>
    <i class="_green"></i>
</section>
section {
    clip: rect(auto, auto, auto, auto);
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
}
gaoryrt commented 6 years ago

codepen 的 demo