CSS3学习笔记

作者: 小灰是蜗牛君 | 来源:发表于2016-04-01 14:12 被阅读16次

效果如图

web动画效果

只需要创建一个一个div

  <body>    
        <div>我是动画效果</div>
  </body>

CSS代码如下

   div{   
        width: 100px;   
        height: 100px;    
        background-color: aquamarine;    
        position: relative;  //必须写上相对位置，不然动画无效果    
        animation: anim 5s infinite alternate;  //后面两个代表循坏、无限替换
  }

  @keyframes anim {    
        0%       {background:red;left: 0px;top: 0px}    
        25%      {background:blue;left: 200px;top: 0px}    
        50%      {background:#00ffff;left: 200px;top: 200px}   
        75%      {background:#ccffcc;left: 0px;top: 200px}    
        100%     {background:red;left: 0px;top: 0px}
  }