javascript - 这个描边动画效果是怎么实现的呢？
本文介绍了javascript - 这个描边动画效果是怎么实现的呢？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
鼠标悬停在上面就会出现这个类似描边效果，纯css可以实现吗？想实现一样的效果具体怎么弄呢？
解决方案
开始我想尝试用伪类来实现，但z-index好像没办法处理，所以就这样模拟了。
demo
<style type="text/css">
.btn{
position: relative;
height: 45px;
width: 200px;
background: #fff;
color: #6cf;
text-align: center;
line-height: 45px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
margin: 0 auto;
border: 1px solid #ccc;
}
.b-l{
position: absolute;
content: "";
display: block;
width: 0px;
height: 1px;
left: -1px;
top: -2px;
background: #6cf;
z-index: -1;
-webkit-transition:width 1s linear 2s,height 0.5s linear 1.5s;
transition:width 1s linear 2s,height 0.5s linear 1.5s;
}
.b-r{
position: absolute;
content: "";
display: block;
width: 0px;
height: 1px;
right: -1px;
bottom: -2px;
background: #6cf;
z-index: -1;
-webkit-transition:width 1s linear 0.5s,height 0.5s linear;
transition:width 1s linear 0.5s,height 0.5s linear;
}
.btn:hover .b-l{
-webkit-transition:width 1s linear,height 0.5s linear 1s;
transition:width 1s linear,height 0.5s linear 1s;
width: 201px;
height: 46px;
}
.btn:hover .b-r{
-webkit-transition:width 1s linear 1.5s,height 0.5s linear 2.5s;
transition:width 1s linear 1.5s,height 0.5s linear 2.5s;
width: 201px;
height: 46px;
}
</style>
<body>
<div class="btn">
<div class="b-l"></div>
<div class="b-r"></div>
btn
</div>
</body>这篇关于javascript - 这个描边动画效果是怎么实现的呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
