css 示例_灵感：CodePen上纯CSS动画的10个示例

css 示例

我们的移动浏览器在向我们展示令人惊叹，精美的动画方面不断变得越来越强大，越来越出色。 当与CSS的布局功能结合使用时，就可以完全不使用任何图像来创建一些精美的作品。 结果是可伸缩的，快速加载的，而且令人印象深刻。

让我们看看人们仅使用HTML和CSS就能制作出令人惊奇的动画。

1.纯CSS骑自行车的人

这里发生了很多事情，很难相信它就是HTML和CSS！ 旋转动画和多个分层运动相结合，使它看起来像这位骑自行车的人和他的自行车都是果冻制成的。 在类命名中也很好地使用了BEM！

2.纯CSS土星呼啦圈

结合大量的活动部件可以使一组简单HTML元素看起来像是一个更复杂的动画，而这个演示很好地做到了这一点。 看看两个行星是如何相互作用的，而循环的“粒子”恰好分散到看起来是随机的。

3.颜色层CSS动画

简单的彩色图层可能看起来并不多，但是当它们移动时它们可以传达角色的负载。 在此示例中，对一组半透明HTML段落标签进行了动画处理，并且生成的堆叠动画是催眠的。

4.冰淇淋装载机

我们并不总是需要JPG或PNG来制作精美的图像，这是另一个例子。 只需要一个容器div和四个容器div即可制作出这种可观看的小冰淇淋主题装载器图像。 结果代码比动画GIF小得多。

5.纯CSS鸽子

当您将HTML元素的艺术用途与某些填充字符的动画结合在一起时，便得到了结果。 一个充满乐趣的令人惊奇的流畅而忙碌的动画。 高度尊重Julia Muzafarova，因为他们必须非常努力地构建所有这些关键帧集。 超过几杯咖啡！

6.睡猫

这款昏昏欲睡的猫将许多简单HTML元素与一堆微妙而有趣的动画组合在一起，具有很多特色。 本示例使用Sass和变量来控制动画。 尝试更改一些以查看会发生什么！

7.黑熊

使用HTML和CSS可以实现流畅的动画，尤其是当我们遵循一些基本原则时。 该动画使元素的数量保持最少，并大量使用了变换。

8. CSS海绵

组合时，快速动画可以添加很多角色。 在此演示中，了解如何将气泡和飞溅编排在一起以创建带有快乐海绵的可爱动画，而这些动画都没有任何图像。

9.纯CSS复选框邮件

一系列关键帧动画可以讲述一个故事或帮助人们了解他们在看什么。 在这里，我们看到打开一个信封并收到一封信。

10.护理预紧器

一点微妙的动作就能营造出强烈的强度感！ 这款装载机有一辆看起来像在加速的汽车，全部由一些元素和CSS动画创建。 没有图像，这将快速加载。

获得灵感！

翻译自: https://webdesign.tutsplus.com/articles/pure-css-animation-inspiration-on-codepen--cms-30875

css 示例