教程、示例代码和示例

当我们使用 JS 和 jQuery 时,我们可以完全控制动画,我们可以创建一些很棒的效果,但价格相当高。 处理时间、跨浏览器兼容性(例如,移动设备在涉及 JS 时就大不相同)和代码复杂性本身是我们在创建动画界面时应该牢记的要点。 所以,今天我们将看看如何通过使用 CSS 动画和过渡来避免 JS。 我们将从非常基本的步骤到一些很棒的效果进行讨论,例如手风琴面板和动画子菜单。 找个座位,你的记事本和一个真正的浏览器(除了 IE 之外的任何东西),让我们开始吧。 热身 在使用 CSS 动画方面,我们有很多优点(和我们生活中的一切一样的缺点)。 如果您需要将这些产品卖给您的老板或客户,请记住以下几点: 它们可能更快,因为它们可以利用硬件加速(作为 HTML5 实现) 它们在移动设备中的表现会更好,并且不需要特定的代码来跟踪触摸事件 JS需要被浏览器解释,破坏浏览器的可能性要大得多。 所以当 CSS 失败时,它会默默地失败,而 JS 可以破坏整个页面 他们有很好的浏览器支持(这个网站将帮助你检查具体的统计数据:http://caniuse.com/#search) CSS3 动画示例 在我们开始讨论这篇文章的内容之前,让我们看一些用纯 CSS 制作的漂亮动画。 纯 CSS Twitter 失败的鲸鱼 由 Steven Dennis 制作,请看实际操作。 纯 CSS 滚动可乐罐 由 Roman Cortes 制造,请参阅实际操作。 纯 CSS 行走的人 … Read more教程、示例代码和示例