端盒日记Day03

vocal！！拖了这么久我才来写，我好Dior。刚刚吃了四根冰淇淋我好Dior。。。

CSS

平面转换——transform

作用：为元素添加动态效果，一般与过渡配合使用

概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）

平移——translate()

属性：transform: translate( X轴移动的距离, Y轴移动的距离)

取值：px、%（参照自身盒子计算结果）正负均可

技巧：tanslate() 只写一个值，表示沿着X轴移动

单独设置X或Y轴移动距离：translateX() 或 translateY()

平移实现居中效果

方法一

position: absolute;

left: 50%;

top: 50%;

margin-left: -100px;

margin-top: -50px;

width: 200px;

height: 100px;

方法二：百分比参照自身盒子尺寸计算结果

postion: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%)

旋转——rotate()

属性：transform: rotate(旋转角度)

旋转角度单位：deg 正顺逆负

改变转换原点：

正常情况下，转换原点是盒子中心点

属性：transform-origin: 水平原点垂直原点位置

取值：方位名词（left, top, right, bottom, center）、px、%

多重转换

以第一种转换形态的坐标轴为准

技巧：先平移后旋转 (因为这样它的坐标轴才不会变，才可以达到轮胎那样滚着走的效果

属性：transform: translate() rotate() // 要写在一起，因为它是复合属性具有层叠性

缩放——scale()

属性：transform: scale(缩放倍数)

transform(X轴缩放倍数, Y轴缩放倍数)

技巧：通常只为scale设置一个值，表X轴Y轴等比例缩放

取值大于1表放大，取值小于1表缩小

倾斜——skew()

属性：transform: skew(xxdeg) 正左右负

渐变———background-image

1. 线性渐变——linear-gradient

background-image: linear-gradient(

渐变方向,

颜色1 终点位置,

颜色2 终点位置,

...

};

取值：

渐变方向：to 方位名词角度度数

终点位置：%

2. 径向渐变——radial-gradient

作用：给按钮添加高光效果

属性：background-image: radial-gradient(

半径 at 圆心位置,

颜色1 终点位置，

);

取值：

半径可以是两条，则为椭圆

圆心位置取值：px、%、方位名词

空间转换（3D转换 ——transform

Z轴位置与视线方向相同

属性：transform

平移

transform: translate3d(x, y, z)

transform: translateX() transform: translateY() transform: translateZ()

取值：px、%（正负均可

视距 perspective

作用：制定了观察者与Z=0平面的距离，为元素添加透视效果

透视效果：近大远小近实远虚

属性：perspective: 视距;

添加给父级，取值范围：800-1200

旋转

transform: rotateZ(值) 跟平面旋转效果一样

transform: rotateX(值) 正：往里走负：电脑关上那样

transform: rotateY(值) 正：从左往右负：从右往左走

左手法则——根据旋转方向确定取值正负

左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为正值方向

自定义旋转轴位置及旋转角度

rotate3d(x y z 角度度数)

x y z取值为0-1之间的数字

立体呈现——transform-style

作用：设置元素的子元素是位于3D空间中还是平面中

属性名：transform-style

属性值：

flat: 子级处于子平面中

preserved-3d: 子级处于3D空间中

呈现立体图形——步骤

父元素添加transform-style: preserved-3d;
// 父级就会变成一个立方体，子级位于立方体空间
子级定位
// 子级是立方体的每个面，所以子级要基于父级去定位子绝父相
调整盒子的位置（位移或旋转）|
// 子级一前一后，产生立体空间(translate)
// 可以用hover{ rotatey() } 和 .cube{ transition: }去体验一下

缩放

属性：transform: scale3d(x, y, z)

transform: scaleX(); transform: scaleY(); transform: scaleZ()

动画——animation

过渡：实现两个状态间的变化过程（transition

动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停

实现步骤

1.定义动画

两个状态变化

@keyframes 动画名称{

form { 当前状态CSS} //如果动画开始状态样式跟盒子默认样式相同可省略开始状态代码

to { 当前状态CSS }

}

多个状态

@keyframe 动画名称 {

0% { } //如果动画开始状态样式跟盒子默认样式相同可省略开始状态代码

10% { }

.....

        100% { }

}

// 百分比的含义：这个状态占动画时长的百分比

2. 使用动画

animation: 动画名称动画花费时长速度曲线延迟时间重复次数动画方向执行完毕时的状态

!! 注意 !! ：

动画名称和动画时长必须写
取值不分先后顺序
如果有两个时间值，第一个表达动画时长第二个表延迟时间

七个属性：

animation-name: 动画名称
animation-duration: 动画时长
animation-delay: 延迟时长
animation-fill-mode: 动画执行完毕时的状态
forwards: 最后一帧
backwards: 第一帧
animation-timing-function: 速度曲线
steps() 逐帧动画
animation-iteration-count: 重复次数
infinite 无限循环
animation-direction: 动画执行方向
alternation 反方向
animation-play-state: 暂停动画
pause为暂停通常配合hover