Firefox 这个功能不就是前端初学者的福音吗？

脚本之家 2023-02-11

The following article is from 前端印象 Author 零一

关注“脚本之家”，与百万开发者在一起

出处：前端印象（ID：zero2one01）

如若转载请联系原公众号

大家好，我是零一，今天分享 Firefox（火狐浏览器）一个有意思的小功能，我也是无意间看到的，看到的时候觉得这个小功能对于一些初学CSS动画相关知识的前端同学非常友好

正文

浏览器的Devtools可以帮助我们调试CSS，例如：新增修改删除某个CSS属性、查看盒子模型、有颜色选择器供你修改颜色...

Chrome也很贴心地在你鼠标移动到某个属性上时，在页面中同步给你展示效果，比如你为 .demo 新增了 margin: 20px 0 的样式，那你鼠标移动到Chrome Devtools中 .demo 的 margin 属性上时，会在页面中展示所有应用了该样式的元素，如下图：

可能这个功能不足为奇，但 Firefox 这个应该能让你连连称赞！

先不废话，上效果图：

transform 这个属性应该说是非常常见了，translate、rorate、scale 这些都是让元素进行各种形式2D、3D的变化，而上图就是演示了当鼠标移动到Devtools中transform的值上时，左侧会同步展示该元素在应用了 transform 前后的对应关系，例如变换前这个节点对应变换后的哪个节点、变换前后的位置分别在哪

可能有人要说，这好像也没啥，我用肉眼也能看出前后变化的对应关系。emmm，嗯，不过重点不是静态的呀，总归我们是要应用到一些动画里的，尤其是特别特别复杂的动画，可能光凭脑袋想象是无法做到的

所以接下来我们给该元素加上复杂的动画效果

.demo {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 300px;
  /* 超级复杂的变换 */
  transform: transform: translate(100px,100px) rotate(45deg) scale(0.5) rotateZ(45deg) skewY(45deg);;
  transition: all 4s ease; /* 加上动画效果 */
}