CSS 六边形边框hover闭合动画效果

1、html标签部分，因为要做hover效果，div所以要做成嵌套

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