分享：CSS3用transition实现边框动画效果

来源：互联网发布：图片归类整理软件编辑：程序博客网时间：2024/06/01 13:50

废话不多说，直接上代码：

1：css

code:
/*** css code ***/
.animate{transition: all 0.5s ease-in-out;}
.m{width: 200px;height: 50px;text-align: center;font-size: 20px;line-height: 50px;font-family: Microsoft Yahei; color: gray;border:2px solid #dfdfdf;cursor: pointer;}
.b{position: relative;}
.b span{display: inline-block;position: absolute;content: none;border: 0;width: 0;height: 0;}
.b span.top{right:0;top:0;border-top:2px solid #000;margin-top:-2px;}
.b:hover span.top{width:198px;}
.b span.right{right:0;bottom:0;border-right:2px solid #000;margin-right:-2px;}
.b:hover span.right{height:48px;}
.b span.bottom{left:0;bottom:0;border-bottom:2px solid #000;margin-bottom:-2px;}
.b:hover span.bottom{width:198px;}
.b span.left{left:0;top:0;border-left:2px solid #000;margin-left:-2px;}
.b:hover span.left{height:48px;}

2：HTML

code:
<div style="width: 90%;height: 100px;">
<div class="m b">
ABOUT US
<span class="top animate"></span>
<span class="right animate"></span>
<span class="bottom animate"></span>
<span class="left animate"></span>
</div>
</div>

阅读全文

1 0