CSS如何调试?

html-css0124

CSS如何调试?,第1张

1.我们以谷歌浏览器为例,来讲讲怎么调试CSS。先打开谷歌浏览器,看截图里的红色箭头,点击“工具”,点击“开发者工具”,就打开调试工具了,也可以按下快捷键F12来打开调试工具;

2.打开的调试工具如下图所示:

3.我们就以百度的首页为例,看看调试效果。看截图,点击那个“抓取元素”的按钮,来获取要审查的元素;

4.看截图,出现下面的界面后,点击“style”,单击那个对勾,就可以看到效果了;

5.我去掉一些样式之后,就出现了下面的效果,看截图;

设置animation-play-state然后调整不同负时间的延迟。你会看到动画在运动中的不同暂停状态。

.thing {

animation: move 2s linear infinite alternate

animation-play-state: paused

animation-delay: -1s

}

正如你看到的,from相当于0%,而to则相当于100%。

如果你的关键帧列表中不包括0%或者100%,元素上现有的动画样式将会直接被用在0%和100%的的位置。此外,你不必按照严格的升序排列来列出百分比。一个0%的关键帧仍然会被认为是动画的第一个关键帧,即使它不是按照顺序排列的。这有很大的灵活性可以给关键帧分组,以便以后再查看。