css动画

动画效果

/* （执行时间 持续时间 监禁检出效果 0S延迟 循环次数 偶数向前播放 ） */

       animation: donghua 20s ease-in-out 0s infinite alternate;
       
      @keyframes donghua{
      /* 动画开始 */
     0%{
         left: 0px;
         top: 0px;
         transform:skew(30deg)
        }
         /* 中间 */
         
     50% {
         left: 700px;
         top: 0px;
         transform:skew(-30deg)}
         /* 结束 */
     100% {
         left: 1500px;      
         top: 0px;
         transform:skew(90deg)}
  }
  
  直接写 @keyframes可能会出现谷歌或者火狐不兼容，所以要加前缀
  @-webkit-keyframes
  

响应式布局之媒体查询

@media screen and（max-width：600px）and（min-width：500px） { }