纯css3实现七彩虹色菜单效果

开头说点啥

css的中文叫层叠样式表，顾名思义，浏览器在渲染时会以从上到下，从左至右的方式，加载css，并根据css的内容，不断针对元素去添加样式，打开控制台的时候我们可以看到，我们声明的样式总是会加载，优先级高的css选择器样式会生效。

同一种样式，不同的人思路不同，那么写出来的css代码就不同，这就是css的魅力所在。本文尝试采用 过渡效果+高斯模糊滤镜 来实现一个暗黑模式的七彩虹色菜单。下面就书归正传

核心实现

• 页面背景色 给body添加一个深色背景,为了方便展示，我们将承载菜单的容器通过flex布局的方式垂直水平居中，因为flex布局垂直水平居中，适合元素宽高不固定的情况

html,body{
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-color: #1e2759;
}

• 承载菜单的容器 菜单我们通过flex布局来实现，并给容器添加一个深色外阴影

<div class="box"></div>
.box{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0,0,0,.25);
    cursor: pointer;
  }

• 元素容器 元素内是我们通过iconfont添加的icon，我们给元素添加定位，为我们接下来的彩灯提供定位元素

<div class="box">
    <div class="item"></div>
</div>
 .box>.item{
    position: relative;
    
  }

• 菜单 菜单我们通过padding的方式，撑开容器,给一个半透明的效果opacity:.25

.box>.item .iconfont{
    font-size: 20px;
    pointer-events: none;
    color: #fff;
    opacity: .25;
    padding: 20px 40px;
    transition: .25s;
    position: relative;
    z-index: 2;
}

这个时候，菜单其实已经很好看了对吧。但是我们还没实现标题里的七彩虹色菜单效果呢，为了不当标题党，我们接着来实现

• 添加一个彩灯 从页面布局来说，彩灯与我们的iconfont是同级的，接下来我们设置一下彩灯的样式，这里需要用到box-shadow属性，box-shadow支持传入四个颜色，分别指定上、右、下、左四个方向的阴影样式

<div class="item">
  <div class="iconfont icon-bytedance"></div>
  <div class="badge"></div>
</div>
.badge{
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 40px;
    border-radius: 10px;
    background-color: #FF0000;
    box-shadow: 0 0 15px #FF0000,
    0 0 30px #FF0000,
    0 0 45px #FF0000,
    0 0 60px #FF0000;
    transition: .5s;
    z-index: 1;
  }

因为定位的原因，我们的彩灯将我们的iconfont图标遮住了，所以我们需要分别指定这两个元素的iconfont的zIndex层级

- 为彩灯设置透明度，默认为0，添加`hover`,当鼠标滑过时，设置透明度为1,顺便将我们的文字透明度也恢复为1 ``` .box>.item:hover .badge{ opacity: 1; } .box>.item:hover .iconfont { opacity: 1; } ```

emm...这个样式有点丑，所以我们在hover内，为我们的文字添加一个高斯模糊滤镜，把彩灯底部模糊掉，看看效果

• 添加高斯模糊

 .box>.item:hover .iconfont {
    backdrop-filter: blur(15px);
    opacity: 1;
  }

• 实现七彩虹色效果 我们通过:nth-of-type伪类选择器，添加七色彩虹的彩灯

.item:nth-child(2) .badge{
    background-color: #FF7F00;
    box-shadow: 0 0 15px #FF7F00,
    0 0 30px #FF7F00,
    0 0 45px #FF7F00,
    0 0 60px #FF7F00;
  }
  .item:nth-child(3) .badge{
    background-color: #FFFF00;
    box-shadow: 0 0 15px #FFFF00,
    0 0 30px #FFFF00,
    0 0 45px #FFFF00,
    0 0 60px #FFFF00;
  }
  .item:nth-child(4) .badge{
    background-color: #00FF00;
    box-shadow: 0 0 15px #00FF00,
    0 0 30px #00FF00,
    0 0 45px #00FF00,
    0 0 60px #00FF00;
  }
  .item:nth-child(5) .badge{
    background-color: #00FFFF;
    box-shadow: 0 0 15px #00FFFF,
    0 0 30px #00FFFF,
    0 0 45px #00FFFF,
    0 0 60px #00FFFF;
  }
  .item:nth-child(6) .badge{
    background-color: #0000FF;
    box-shadow: 0 0 15px #0000FF,
    0 0 30px #0000FF,
    0 0 45px #0000FF,
    0 0 60px #0000FF;
  }
  .item:nth-child(7) .badge{
    background-color: #8B00FF;
    box-shadow: 0 0 15px #8B00FF,
    0 0 30px #8B00FF,
    0 0 45px #8B00FF,
    0 0 60px #8B00FF;
  }