css 想啥写啥

字母大小写

• text-transform 值：
  capitalize 英文拼音的首字母大写
  uppercase 英文拼音字母全大写
  lowercase 英文拼音字母全小写

文字超出省略号

• text-overflow 值：
  clip：不显示省略标记（...），而是简单的裁切；
  ellipsis：当对象内文本溢出时显示省略标记（...）。

css 过渡和动画

    transition-delay: 1s;
    transition-duration: 2s;
    transition-property: height;
    transition-timing-function: ease;

    transition: 1s 2s height ease;

animation
animation 可以帮我们实现复杂的动画，使用animation我们首先要定义动画过程，也就是关键帧

  @keyframes rainbow {
    0% { background: #coo; }
    50% { background: orange; }
    100% { background: yellowgreen; }
  }

绑定动画

div:hover {
  animation: 1s raindow;
}

当鼠标悬停在div元素上时，会产生名为rainbow的动画效果，持续时间为哦1s，动画只播放一次。加入infinite关键字，可以让动画无限次播放；

div:hover {
  animation: 1s rainbow infinite;
}

也可以指定动画播放次数，比如3次：

div:hover {
 animation: 1s ranibow 3;
}

animation-fill-mode
动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用animation-fill-mode属性。

div:hover {
  animation: 1s rainbow forwards;
}

animation-fill-mode可以使用下列值

• none：默认值，回到动画没开始时的状态
• forwards：让动画停留在结束状态
• backwards：让动画回到第一帧的状态
• both: 根据animation-direction（见后）轮流应用forwards和backwards规则

animation-direction
动画循环播放时，每次都是从结束状态跳回到起始状态，在开始播放。animation-direction属性，可以改变这种行为

animation-direction

简写：

  div:hover {
    animation: 1s 2s rainbow infinite forwards alternate ;
  }

分写：

  div:hover {
    animation-duration: 1s;
    animation-delay: 2s;
    animation-name: rainbow;
    animation-timing-function: linear; /* ease */
    animation-iteration-count: 3;      /* infinte */
    animation-fill-mode:forwards;      /* none forwards backwards both */
    animation-direction: normal;       /* normal reverse alternate alternate-reverse */
  }

垂直水平居中

<style>
  html,body {
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
  }
  div {
    position: absolute;
    width: 50%:
    height: 50%;
    transform: translate(-50%,50%);
    background-color: #333;
  }
</style>

或者用负margin也行。

自适应固定宽高比

  html,body {
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
  }
 .img-ct {
   width: 50%;
   height: 0;
   padding-bottom: 25%;  // 父元素宽度的25%，宽高比2:1
  }