听说code能改变world，所以就学了

CSS3属性之：animastion 

<!doctype html>
<html>
  <head>
      <style>
         .round01{
          width: 42px; 
        height: 42px;
             border-radius: 50px;
             position: relative;
        border:2px solid rgba(145,139,157,0);
        animation: one-myfirst 2s ease 3s infinite alternate;
        /*animation:动画的名称 动画完成的时间 规定动画的速度曲线 定义播放的次数0|infinite 动画是否逆向回放*alternate|normal*/
         }
       .round01:hover{background: red;}
         .round02{
             position: absolute;
          top: 9px;
        left: 9px;
             width: 42px; 
             height: 42px;
             border-radius: 42px;
             background: red;
         }
         
         @keyframes one-myfirst
{
/*xx%表示完成的百分比*/
50% {
  width: 60px; 
  height: 60px;
  border:2px solid rgba(145,139,157,0.5);
}
}
      </style>

  </head>
  <body>
         <div class="round01">
              <div class="round02">
                  <span></span>
              </div>
            </div>

      </div>
</html>

效果图

posted @ 2013-11-17 10:55  李腾  阅读(338)  评论(0)    收藏  举报

如果我加了黑链呢：http://liteng.org