元素面板里的编辑器
仔细深入的话,元素面板里面还有很多被忽略的功能。
1. 元素面板中类似于基础编辑器的操作
从某一点来看,我们可以拖动,放置,编辑,复制(当然,以及使用 [ctrl]
+ [v]
来粘贴), 所以我们可以在元素面板里把 HTML
结构搞得一团糟。在任意一个编辑器中都有一个标准,那么如何撤回你的操作呢?
使用 [ctrl]
+ [z]
( [⌘]
+ [z]
on Mac)撤销我们的任何改动。
使用 [ctrl]
+ [shift]
+ [z]
重新编辑我们的任何修改。
2. Shadow editor
阴影编辑器
听起来很不吉利(译者注:阴影哪里不吉利了!),但是它也只是一个小部件而已。你可以通过在 Style
面板中点击靠近 box-shadow
属性或者 text-shadow
属性的 阴影方形符号
来打开它:
3. Cubic bezier
贝塞尔曲线编辑器
贝塞尔曲线,通常用来定义 CSS
的动画速度在动画各个阶段中的变化 。一般将其定义为 transition-timing-function
或者 animation-timing-function
CSS 属性。
像之前说的 Color picker
和 Shadow editor
一样,直接点击边上的曲线符号:
如果使用简写的形式,但是没有定义这个值的话,是看不到这个曲线符号的
网上有很多关于贝塞尔曲线的解释,一打开都是一堆公式和函数,有兴趣钻研是最好,但是最基本的,你只要知道这个线是怎么影响动画的速度就知道怎么用了:
横轴是时间,竖轴是动画的整个进程。也就是说,如果两个点之间的线,越接近垂直:横坐标的差越小意味着 → 时间越短;纵坐标的差越大 → 进程占比越大。
换句话说,我在越短的时间要执行越多的动画,process(大)/time(小) = v (越大),动画的速度越快!
反过来,线越接近水平:时间越长,进程占比越小,process(小)/time(大) = v(越小),动画的速度越慢。
解释完毕,一个公式都不需要会。
想试试 3D
动画:直接在容器元素中设置一个 perspective
属性。例如:在 body
元素中设置 perspective: 200px;