查看效果可戳此

配合文章效果食用更佳

css

• background-size :
  设置背景图像的高度和宽度。
  第一个值设置宽度，第二个值设置高度。
  如果只设置一个值，则第二个值会被设置为 "auto"。 percentage 以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。

• css 设置 往右上角方向 缩小 一半 transform: scale(.5); transform-origin: top right;

• letter-spacing 文字间的间距

• linear-gradient(0deg,#f8d7cf,#fff 50%,#fff)

• animation-timing-function: steps 但有的时候某些效果不需要补间，只需要在关键帧之间进行跳跃，这时就用到了 steps 过渡方式。