最近 Google+ 进行了改版,整体效果如何我就不吐槽了.

有些设计上的细节比较有意思,比如这个后台载入的提示:

通过开发者工具分析可以看出来,它是通过 CSS3 animation 让一个 div 循环移动实现的

于是我也来尝试实现了一下这个效果,并封装成 jQuery 插件,

通过举一反三,还可以实现动态环绕的边框效果:

目前的封装很简单,使用起来也很简单(依赖 jQuery)

  • 引入相关文件

    <link rel="stylesheet" href="live-border.css"/>
    <script type="text/javascript" src="live-border.js"></script>
    
  • 初始化

    $("#id-btn1").liveBorder();
    $("#id-btn2").liveBorder({
    top: true, 
    right: true, 
    bottom: true, 
    left: true
    });
    

代码