图片文字遮罩：
引用：色块上移 ，需要默认文字不可见 ，定位色块的位置
间距用p标签的margin，因为padding会改变盒子的大小
代码如下：
图片变形：
原理：图片变形是指将一个图片原来的形状变成另一个形状
知识点：一个图片box的变形不会影响到另一个box
图片变形有四种类型，分别是 位移，旋转 ，缩放和斜切：
示例代码图：
元素旋转：
元素旋转既元素的反转，旋转的方向有
1：X轴向右、Y轴向下、Z轴向屏幕外
2：让轴向对着自己，顺时针方向就是该轴向的旋转方向
使用transform-style: preserve-3d； 来设置盒子按3D空间来显示
perspective设置透视距离，经验数值800比较符合人眼的透视效果
变形中心点：
transform-origin函数可以设置图像的旋转中心以及变形中心
通过nth-child()函数可以调用接下来的第几个元素
举个栗子：
背面可见：
既元素旋转后的背面是否可见 用backface-visibility函数
图片反面:
以下两句是为了演示图片和文字层重叠的效果
transform-style: preserve-3d;
transform: perspective(800px) rotateY(45deg); 初始旋转45度
图片和文字背面不可见，文字初始已翻转，所以隐藏露出底层图片
transform: translateZ(10px); 初始文字浮起10像素方便查看图片与文字分层的效果
举个荔枝：
animation动画：
动画名称、时间、曲线、延迟、播放次数、结束后是否返回、动画前后的状态
@keyfrmes函数用来初始化动画状态
infinite 不限次数
alternate 动画结束后返回，返回也算次数
animation-fill-mode 动画前后的状态
forwards 动画完成保持在最后一帧
backwards 在延迟时间内，在动画显示之前、引用from开始属性值（例如box宽100、from宽100， 在延迟1s内显示200）
both 向前和向后填充模式都被应用( 例如起始按200，结束停在最后一帧 )
动画停止：animation-play-state：paused；
动画运行：animation-play-state：running；
