在layui论坛上闲逛时发现了一个用css3实现的边框动画，故简单实现了下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .container{position: relative;width: 200px;height: 100px;line-height: 100px;text-align: center;border: 1px solid #ccc;} span{position: absolute;display: inline-block;content: none;width: 0;height: 0;font-size: 0;border: 0;transition: .5s;} /*该动画实则是通过四个span标签分别设置边框，然后再增加宽度或者高度来实现的*/ .top{top: 0;right: 0;border-top: 2px solid #000;} .right{bottom: 0;right: 0;border-right: 2px solid #000;} .bottom{bottom: 0;left: 0;border-bottom: 2px solid #000;} .left{top: 0;left: 0;border-left: 2px solid #000;} .container:hover .top,.container:hover .bottom{width: 200px;} .container:hover .left,.container:hover .right{height: 100px;} /*animate动画，因为上面运用了transition动画，故下面的动画注释了*/ /*.top,.bottom{animation: bt .6s infinite ease-in-out;} .left,.right{animation: bl .6s infinite ease-in-out}*/ @keyframes bt{ from{ width: 0; } 25%{ width: 50px; } 50%{ width: 100px; } 75{ width: 150px; } to{ width: 200px; } } @keyframes bl{ from{ height: 0; } 25%{ height: 25px; } 50%{ height: 50px; } 75%{ height: 75px; } to{ height: 100px; } } </style> </head> <body> <div class="container"> KOBE BRYANT <span class="top"></span> <span class="right"></span> <span class="bottom"></span> <span class="left"></span> </div> </body> </html>
也可以看看这篇文章