内容简介
这是小y学习css、js的记录和分享。
绝大部分内容将会是非原创，侵删。
原链接
https://www.bilibili.com/video/BV1eV411d7D8
效果展示
代码
<body>
<div class="enclose">
<span class="top"></span>
<span class="right"></span>
<span class="bottom"></span>
<span class="left"></span>
<p>Button</p>
</div>
</body>
body{
background-color: black;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.enclose{
position: relative;
width: 150px;
height: 50px;
text-align: center;
color: #fff;
background-color: rgba(241, 241, 241, .25);
text-shadow: 0 0 0 #2097ef;
cursor: pointer;
transition: all 1s;
}
.top,.right,.bottom,.left{
position: absolute;
background-color: #2097ef;
box-shadow: 0 0 10px #2097ef;
transition: all .1s;
}
.top{
top: 0;
left: 0;
width: 0;
height: 3px;
transition-delay: .3s;
}
.enclose:hover>.top{
width: 150px;
transition-delay: 0s;
}
.right{
top: 0;
right: 0;
width: 3px;
height: 0;
transition-delay: .2s;
}
.enclose:hover>.right{
height: 50px;
transition-delay: .1s;
}
.bottom{
bottom: 0;
right: 0;
width: 0;
height: 3px;
transition-delay: .1s;
}
.enclose:hover>.bottom{
width: 150px;
transition-delay: .2s;
}
.left{
bottom: 0;
left: 0;
width: 3px;
height: 0;
}
.enclose:hover>.left{
height: 50px;
transition-delay: .3s;
}
337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
