CSS动画
重点:
数组组件构造4个完全一样的box
动画变换背景色background-color
重点:
transform-origin
rotateY()
重点:
overflow-y: hidden
translateY()
重点:
自适应屏幕(vmin)
伪类(::before)充当作子组件
translateX()
重点:
组件样式 vs 页面样式
伪类
渐变背景:linear-gradient, radial-gradient,conic-gradient
自定义timing-function(贝塞尔曲线):https://cubic-bezier.com
动画后半程暂停
重点:
transform-origin
rotateZ()
重点:
box-shadow
text-shadow
rotateZ()
重点:
transparent border
不同的动画时长
重点:
scale, position
不同的动画延时
重点:
overflow: hidden
box-shadow
translate, scale
timing-function(视频里忘录了)
重点:
外部设计好样式再复制到动画关键帧里
重点:
拆解复杂图形
border, border-box, 制作等腰梯形
rotate, scale, translate
数据组件嵌套
重点:
变量
自适应视窗宽度:vw
transform-origin
direction: alternate vs. alternate-reverse