1、html标签部分，因为要做hover效果，div所以要做成嵌套
<body>
<div class="item-boder1">
<div class="item-boder2">
<div class="item-boder3"></div>
</div>
</div>
</body>
2、利用伪类创建六边形，这里只取了每个伪类的top边框，是为了后面用clip做动画效果
.item-boder1,
.item-boder2,
.item-boder3 {
width: 200px;
height: 200px;
position: absolute;
}
.item-boder1:after,
.item-boder1:before,
.item-boder2:after,
.item-boder2:before,
.item-boder3:after,
.item-boder3:before {
content: '';
width: 8.5vh;
height: 15vh;
box-sizing: border-box;
border-top: 2px solid;
position: absolute;
top: 1vh;
left: 3.4vh;
//clip: rect(0, 8.5vh, 2px, 8.5vh);
}
.item-boder1:before {
transform: rotate(30deg);
}
.item-boder1:after {
transform: rotate(-30deg);
}
.item-boder2:before {
transform: rotate(150deg);
}
.item-boder2:after {
transform: rotate(-150deg);
}
.item-boder3:before {
transform: rotate(90deg);
}
.item-boder3:after {
transform: rotate(-90deg);
}
3、添加hover边框闭合动画，这里要注意的是伪类的hover效果格式.item-boder1:hover:after，hover要写中间
.item-boder1:hover:after,
.item-boder1:hover:before,
.item-boder2:hover:after,
.item-boder2:hover:before,
.item-boder3:hover:after,
.item-boder3:hover:before {
animation: boxBorder 1s ease-out 1;
animation-fill-mode: forwards;
}
@keyframes boxBorder {
0% {
border-color: lightseagreen;
clip: rect(0, 8.5vh, 4px, 8.5vh);
}
100% {
border-color: lightseagreen;
clip: rect(0px, 8.5vh, 4px, 0)
}
}
4、看一下效果
hover.gif
网友评论