<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><div class="box"> <div class="one"></div> <div class="one"></div> <div class="one"></div> <div class="one"></div> <a href="#">鹏仔先生</a> </div>
本文链接：https://my.lmcjl.com/post/20996.html
展开阅读全文
4 评论