今天在做开发的时候突发奇想做一个鼠标放上去,底部边框向两边延伸的动画效果。主要思想是用DOM的伪元素来代替它自身的border,然后设置伪元素的width和height的动画效果。
Dome演示地址:
https://www.wlittleyang.com/HTML+CSS3-Note/source/HTML5+CSS3/borderDoubleGrow.html
代码如下:
html:
<div id="box"> <div>摸我</div> </div>
css:
<style type="text/css">
#box{ margin: 40px auto;}
#box,#box>div{
width: 300px;
height: 300px;
box-sizing: border-box;
position: relative;
cursor: pointer;
background: #eeeeee;
line-height: 300px;
text-align: center;
font-size: 50px;
}
#box::before,
#box::after,
#box>div::before,
#box>div::after{
content: "";
background: crimson;
transition: all 1s ease;
width: 0;
height: 0;
position: absolute;
z-index: 1;
}
#box::before{
left: 50%;
height: 2px;
top: 0;
}
#box::after{
bottom: 0;
left: 50%;
height: 2px;
}
#box>div::before{
left: 0;
top: 50%;
width: 2px;
}
#box>div::after{
right: 0;
top: 50%;
width: 2px;
}
#box:hover::before,
#box:hover::after{
left: 0;
width: 100%;
}
#box>div:hover::before,
#box>div:hover::after{
top: 0;
height: 100%;
}
</style>