前端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实现的前端落地思路旨在抛砖引玉!求亲们点赞支持!🙏🙏🙏