前端css纯手搓布局_深色系列(1)_掘金菜单入口

前端css+html纯纯的手工打造一个关于掘金菜单的入口的布局， 风格有点莫名其妙，自己临时代码手搓的！没有具体的业务含义，贵在原创和真实吧 css技能点+1也行！

1.效果图

鼠标经过卡片高亮展示 底部纹路有过渡光效

2.用css上一个简单的纹路背景

  background: linear-gradient(#0a162d 40%,#021129 0);
  background-size: 100% 30px;

3.用css手搓一个六边形然后v-for循环

.easy-y-item{ 
  position: relative;
  display: inline-block;
  width: 100px;
  height: 110px;
  margin: 1px;
  margin-top: -32px;
  box-sizing: border-box; 
  background: #091631;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%, 50% 0%); 
  overflow: hidden; 
  // 注意观察循环的卡片在第几个是要有位移处理的
  &:nth-child(7),&:nth-child(18),&:nth-child(29){
    margin-left: 52px;
  } 
 } 

4.套在父元素且父元素做一个overflow：hidden 有个相对定位的水平垂直居中小知识点

父元素设置 position: relative 子元素设置position: absolute; 子元素在父元素内垂直水平居中的css处理方法

    width: 620px;
    height: 620px;
    top: 50%;  
    left: 50%;   
    margin-top: -310px; /* 为子元素高度的一半 */  
    margin-left: -310px; /* 为子元素宽度的一半 */ 

5.添加底图纹理光效

这里其实并没有代码落地实现的难度，主要是空间想象的事情。 这里大家可以发现六边形的一系列卡片之间都有一缝隙，底部放置横竖2个div图层背景色蓝色，只要设置z-index的值比六边形div小，这样在是视觉上就可以发现六边形缝隙间有光透过

  // 底部光效图层 上下移动 
  @keyframes layer1Move {
    0% { top:-190px}
    50% { top:400px}
    100% { top:-190px}
  }
  // 底部光效图层 左右移动
  @keyframes layer2Move {
    0% { left:-190px}
    50% { left:400px}
    100% { left:-190px}
  }
 
  .easy-y-layer-1{
    position: absolute;
    width: 100%;
    height: 190px;
    background: linear-gradient(to bottom, rgba(#3cd1fc,0), #3cd1fc, rgba(#3cd1fc,0));
    z-index: 7;
    top:0px; 
    animation:layer1Move 3s linear infinite;
  }
  .easy-y-layer-2{
    position: absolute;
    width: 190px;
    height: 100%;
    background: linear-gradient(to right, rgba(#3cd1fc,0), #3cd1fc, rgba(#3cd1fc,0));
    z-index: 6;
    left:0px; 
    animation:layer2Move  3s 1s linear infinite;
  } 
  

6 码上掘金在线查看完整样例

整体来说实现并不是很难 主要是前端布局中的每个图层怎么去拆分,以及层级的z-index值的设置。
当然实现这个效果的方法有很多,也有通过js处理等更高效的方法。这里我简单描述了通过css实现的前端落地思路旨在抛砖引玉！求亲们点赞支持！🙏🙏🙏