CSS3新特性

• transiton(过渡)
  • transition: css属性， 花费时间，效果曲线(默认ease)，延迟时间(默认0)

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

• animation(动画)

  • animation: 动画名称，一个周期花费时间，运动曲线(默认ease)，动画延迟(默认0)，播放次数(默认1)，是否反向播放动画(默认normal)，是否暂停动画(默认running)

  animation-fill-mode: none | forwards | backwards | both;
  none: 不改变默认行文
  forwards：当动画完成后，保持最后一个属性值(在最后一个关键帧中定义)
  backwards: 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值(在第一个关键帧中定义)
  both: 向前向后填充模式都被应用
  

• 形状转换

  • transform: 使用于2D或3D转换的元素
  • transform-origin: 转换元素的位置(围绕哪个点进行转换)。默认(x，y，z):(50%， 50%，0)

• 选择器

  
  image

• 阴影
  box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影的方向(默认从里往外，设置inset就是从外往里)

• 多张背景图

  background:url('test.jpg') no-repeat left,url(logo.png) no-repeat right;
  

• Filter（滤镜）

<p>原图</p>
<img src="test.jpg" />
<p>黑白色filter: grayscale(100%)</p>
<img src="test.jpg" style="filter: grayscale(100%);"/>
<p>褐色filter:sepia(1)</p>
<img src="test.jpg" style="filter:sepia(1);"/>
<p>饱和度saturate(2)</p>
<img src="test.jpg" style="filter:saturate(2);"/>
<p>色相旋转hue-rotate(90deg)</p>
<img src="test.jpg" style="filter:hue-rotate(90deg);"/>
<p>反色filter:invert(1)</p>
<img src="test.jpg" style="filter:invert(1);"/>
<p>透明度opacity(.5)</p>
<img src="test.jpg" style="filter:opacity(.5);"/>
<p>亮度brightness(.5)</p>
<img src="test.jpg" style="filter:brightness(.5);"/>
<p>对比度contrast(2)</p>
<img src="test.jpg" style="filter:contrast(2);"/>
<p>模糊blur(3px)</p>
<img src="test.jpg" style="filter:blur(3px);"/>
<p>阴影drop-shadow(5px 5px 5px #000)</p>
<img src="test.jpg" style="filter:drop-shadow(5px 5px 5px #000);"/>

• https://juejin.im/post/5a0c184c51882531926e4294#heading-53