CSS3学习笔记

效果如图
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}
  }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容