赞！15个来自 CodePen 的酷炫 CSS 动画效果

最新推荐文章于 2023-03-24 17:56:16 发布

前端老码农

最新推荐文章于 2023-03-24 17:56:16 发布

阅读量681

点赞数

分类专栏：前端文章标签： css3 javascript web css 动画

原文链接：https://www.mk2048.com/blog/blog.php?id=hab0211h2hcb&title=%E8%B5%9E%EF%BC%8115%E4%B8%AA%E6%9D%A5%E8%87%AA+CodePen+%E7%9A%84%E9%85%B7%E7%82%AB+CSS+%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C

版权

前端专栏收录该内容

2065 篇文章 12 订阅

订阅专栏

　　CodePen 是一个在线的前端代码编辑和展示网站，能够编写代码并即时预览效果。你在上面可以在线分享自己的 Web 作品，也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果。

　　今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子，这些 Demo 可以说都是艺术品。（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览）

1. JavaScript Mickey Watch

Apple watch like Mickey watch by Jay Salvat (@jaysalvat).

米老鼠是大家非常熟悉的迪斯尼动画形象。这是一个可爱的效果，结合 CSS & SVG 图形实现的米老鼠钟表效果。

src="https://codepen.io/jaysalvat/embed/ogQbKB/?height=600&theme-id=12451&default-tab=result" frameborder="no" scrolling="no" width="600" height="600">

2. CSS Submarine

Submarine with CSS by Alberto Jerez (@ajerez).

这是一个综合使用 CSS 各种属性实现的潜水艇动画，是不是很逼真啊？

src="https://codepen.io/ajerez/embed/EaEEOW/?height=460&theme-id=12451&default-tab=result" frameborder="no" scrolling="no" width="600" height="460">

3. ASCII AT-AT

AT-AT by Tim Pietrusky (@TimPietrusky).

受《星球大战》启发，使用 CSS 编写的人员运输车效果，使用了多种文本颜色，一个时髦的效果。

src="https://codepen.io/TimPietrusky/embed/uLbfr/?height=400&theme-id=12451&default-tab=result" frameborder="no" scrolling="no" width="600" height="400">

4. SVG/CSS Loader

Loader SVG/CSS by Bidji (@Bidji).

这个 loading 效果通过使用变换的色彩来给人产生正在旋转的印象。

src="https://codepen.io/Bidji/embed/dPEzwq/?height=400&theme-id=12451&default-tab=result" frameborder="no" scrolling="no" width="600" height="400">

5. 3D CSS Tardis

3D CSS Tardis by Gerwin van Royen (@Gerwinnz).

CSS 可以用来制作各种有趣的 3D 效果，这是一个 3D 的Tardis（英国科幻电视剧中的时间机器和宇宙飞船）。

src="https://codepen.io/Gerwinnz/embed/hjxzl/?height=510&theme-id=12451&default-tab=result" frameborder="no" scrolling="no" width="600" height="510">

6. Dozing Bird

Dozing Bird by Peter Klein (@pmk).

简单的艺术风格，加上适量的动画给这个正在打瞌睡的鸟一种生活的幻觉。

src="https://codepen.io/pmk/embed/ByXOOq/?height=600&theme-id=12451&default-tab=result" frameborder="no" scrolling="no" width="600" height="600">

7. Pure CSS border animation

Pure CSS border animation without SVG by Rplus (@rplus).

简单而非常有效的使用 CSS 边框创建的 loading-style 动画。

src="https://codepen.io/Rplus/embed/lEDBj/?height=339&theme-id=12451&default-tab=result" frameborder="no" scrolling="no" width="600" height="339">

8. Star Wars: The Force Awakens

Star Wars: The Force Awakens in CSS by Donovan Hutchinson (@donovanh).

使用 CSS, HTML 和 JavaScript 制作的《星球大战》电影片头标题效果。

src="https://codepen.io/donovanh/embed/pJzwEw/?height=498&theme-id=12451&default-tab=result" frameborder="no" scrolling="no" width="600" height="498">

页面加载太卡了，下篇请查看这里《15个来自 CodePen 的酷炫 CSS 动画效果【下篇】》

=======================================================

您可能感兴趣的相关文章

本文链接：赞！15个来自 CodePen 酷炫 CSS 动画效果

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文出处【http://www.cnblogs.com/lhb25/】

更多专业前端知识，请上【猿2048】www.mk2048.com