3D与动画

• 形成3D空间

transform-style:preserve-3d;

• 景深：观察物体时，近大远小

perspective:800px;（给父级元素添加）

• 观察点位置设置

perspective-origin:;
                            left right top bottom px

• 背面不可见

backface-visibility:;
                           hidden 不可见
                           visible 可见

animation 

1、定义动画

@keyframes name{

from{}起始位置
to{}终点位置
}

或

@keyframes name{

0%{}起始位置
25%{}过程1
...
100%{}终点位置
}

2、调用动画

animation-name:mz;                      动画名字
animation-duration:;                      运动时间
animation-delay:;                           延迟时间
animation-iteration-count:infinite;  运动次数：无限次（数字）
animation-direction:reverse;          运动方向：逆时针
                               alternate                           先顺再逆（奇顺偶逆）
                               alternate-reverse              先逆再顺（奇逆偶顺）
animation-timing-function:;        运动类型

linear：线性过渡
ease：平滑过渡
ease-in：由慢到快
ease-out：由快
ease-in-out：由慢到快再到慢
step-start:马上跳到动画每一结束桢的状态

animation-play-state:running/paused;动画状态：运动/暂停

综合写法
animation:名字 运动时间 速度 延迟时间 次数;

 

animation vs transition

• 相同点：都是随着时间改变元素的属性值。

• 不同点：transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属

 

选择器：target{} 当元素被点击时的指向，发生样式的改变

css样式 圆角

border-radius:;
元素是正方形    宽度值一半的px    50%   正圆
元素是长方形    较小值的一半px              半圆
                         50%                           椭圆