正文

瀏覽器的Devtools可以幫助我們調(diào)試CSS，例如：新增修改刪除某個CSS屬性、查看盒子模型、有顏色選擇器供你修改顏色...

Chrome也很貼心地在你鼠標(biāo)移動到某個屬性上時，在頁面中同步給你展示效果，比如你為 ??.demo?? 新增了 ??margin: 20px 0?? 的樣式，那你鼠標(biāo)移動到Chrome Devtools中 ??.demo?? 的 ??margin?? 屬性上時，會在頁面中展示所有應(yīng)用了該樣式的元素，如下圖：

可能這個功能不足為奇，但 Firefox 這個應(yīng)該能讓你連連稱贊！

先不廢話，上效果圖：

??transform?? 這個屬性應(yīng)該說是非常常見了，??translate??、??rorate??、??scale?? 這些都是讓元素進(jìn)行各種形式2D、3D的變化，而上圖就是演示了當(dāng)鼠標(biāo)移動到Devtools中??transform??的值上時，左側(cè)會同步展示該元素在應(yīng)用了 ??transform?? 前后的對應(yīng)關(guān)系，例如變換前這個節(jié)點(diǎn)對應(yīng)變換后的哪個節(jié)點(diǎn)、變換前后的位置分別在哪

可能有人要說，這好像也沒啥，我用肉眼也能看出前后變化的對應(yīng)關(guān)系。emmm，嗯，不過重點(diǎn)不是靜態(tài)的呀，總歸我們是要應(yīng)用到一些動畫里的，尤其是特別特別復(fù)雜的動畫，可能光憑腦袋想象是無法做到的

所以接下來我們給該元素加上復(fù)雜的動畫效果

.demo {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 300px;
  /* 超級復(fù)雜的變換 */
  transform: transform: translate(100px,100px) rotate(45deg) scale(0.5) rotateZ(45deg) skewY(45deg);;
  transition: all 4s ease; /* 加上動畫效果 */
}

先不用 Firefox 的功能來看一遍是什么樣的：

不展示運(yùn)動軌跡

再來看看應(yīng)用上 Firefox 的功能的效果：

展示運(yùn)動軌跡

效果應(yīng)該很明顯了，有運(yùn)動軌跡時可以讓你看清變換過程中每個節(jié)點(diǎn)的運(yùn)動軌跡，如果還看不清，可以把動畫時間修改成 ??10s??? 甚至 ??20s??