这个功能算是前端的福音了

前端宇宙

共 1088字,需浏览 3分钟

 ·

2021-12-24 17:35

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

正文

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

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

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

先不废话,上效果图:

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

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

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

.demo {
  width100px;
  height100px;
  background-color: red;
  margin300px;
  /* 超级复杂的变换 */
  transform: transform: translate(100px,100pxrotate(45degscale(0.5rotateZ(45degskewY(45deg);;
  transition: all 4s ease; /* 加上动画效果 */
}

先不用 Firefox 的功能来看一遍是什么样的:

不展示运动轨迹

再来看看应用上 Firefox 的功能的效果:

展示运动轨迹

效果应该很明显了,有运动轨迹时可以让你看清变换过程中每个节点的运动轨迹,如果还看不清,可以把动画时间修改成 10s 甚至 20s

浏览 24
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报