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

html-css016

CSS 六边形边框hover闭合动画效果,第1张

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

2、利用伪类创建六边形，这里只取了每个伪类的top边框，是为了后面用clip做动画效果

3、添加hover边框闭合动画，这里要注意的是伪类的hover效果格式.item-boder1:hover:after，hover要写中间

4、看一下效果

1 <div id="box1"></div>2 <div id="box2"></div>3 <div id="box3"></div>  #hexagon { 2     width: 100px 3     height: 55px 4     background: red 5     position: relative 6 } 7 #hexagon:before { 8     content: "" 9     position: absolute10     top: -25px11     left: 012     width: 013     height: 014     border-left: 50px solid transparent15     border-right: 50px solid transparent16     border-bottom: 25px solid red17 }18 #hexagon:after {19     content: ""20     position: absolute21     bottom: -25px22     left: 023     width: 024     height: 025     border-left: 50px solid transparent26     border-right: 50px solid transparent27     border-top: 25px solid red28 }