前端知识点解析——元素的变幻

图片文字遮罩：

引用：色块上移 ，需要默认文字不可见 ，定位色块的位置

间距用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；

多帧动画：