GSAP动画效果二

使用GSAP简单的绘制一个线条变化的盒子：

<div  id="box"></div>

设置CSS样式，显示盒子：

        <style type="text/css">
            html, body{
                height: 100%;
            }
            body{
                background: #086b99b6;
                margin: 150px;
                padding: 0%;
                position: relative;
            }
            #box{
                width:200px;
                height: 200px;
                border: solid 2px #d6e0e0;
            }
        </style>

接下来，只需要一句很简单额代码，就可以让盒子的线条动起来。当然，前提是理解了TweenMax.to函数的基础上：

        <script src="js/TweenMax.min.js"></script>
        <script type="text/javascript">
            TweenMax.to(box, 2, {borderRadius:"50%", repeat:-1});
        </script>

对box对象，在接下来的2秒内，边框的四个角变成50%（即圆形），播放次数为无限次（repeat：-1），其中-1表示无限次。

动画效果：