详情 www.sharedblog.cn/?post=67
CSS代码
<style type="text/css">
div,body,input,textarea,a,select,h1,h2,h3,h4,h5,h6,span,p,ul,ol,li,dl,dd,dt,form,table,span,img{
margin:0;
padding:0;
}
.box{
width: 350px;
height: 150px;
border: 10px solid rgba(29,6,253,1);
margin: 30px;
text-align: center;
transition: all 3s;
overflow: hidden;
position: relative;
}
.box a{
display: block;
text-decoration: none;
color: black;
font-weight: bold;
font-size: 30px;
line-height: 150px;
}
.box:hover{
border: 10px solid rgba(29,6,253,0);
}
.box .one:nth-child(1){
width: 350px;
height: 10px;
background: pink;
position: absolute;
top: 0;
left: -350px;
}
.box .one:nth-child(2){
width: 350px;
height: 10px;
background: pink;
position: absolute;
bottom: 0;
right: -350px;
}
.box .one:nth-child(3){
width: 10px;
height: 160px;
background: pink;
position: absolute;
bottom: -160px;
left: 0;
}
.box .one:nth-child(4){
width: 10px;
height: 160px;
background: pink;
position: absolute;
top: -160px;
right: 0;
}
.box:hover .one:nth-child(1){
transform: translateX(350px);
transition: all 2s;
}
.box:hover .one:nth-child(2){
transform: translateX(-350px);
transition: all 2s;
}
.box:hover .one:nth-child(3){
transform: translateY(-160px);
transition: all 3s;
}
.box:hover .one:nth-child(4){
transform: translateY(160px);
transition: all 3s;
}
</style>
HTML代码
<body>
<div class="box">
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<a href="#">鹏仔先生</a>
</div>
</body>
