css整理

css参考手册

动画 animation

语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

属性

• animation-name ：动画名称
• animation-duration：完成时间
• animation-timing-function：播放速度
• animation-delay：延迟时间
• animation-iteration-count：播放次数
• animation-direction：反向播放
• animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
• animation-play-state： 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

简单实现

    .box {
      width: 200px;
      height: 200px;
      transform: translate(0, 0);
      background: red;
      animation-name: aaa;
      animation-duration: 1s;
      animation-iteration-count: 3;
    }

    @keyframes aaa {
      from {
        transform: translate(0px, 0px);
      }

      to {
        transform: translate(500px, 0px);
      }
    }

背景属性 background

语法

body
{ 
    background: #00ff00 url('smiley.gif') no-repeat fixed center; 
}

属性

• background-color：指定要使用的背景颜色
• background-position 指定背景图像的位置
• background-size 指定背景图片的大小
• background-repeat 指定如何重复背景图像
• background-origin 指定背景图像的定位区域
• background-clip 指定背景图像的绘画区域
• background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
• background-image 指定要使用的一个或多个背景图像

菜鸟教程