15个来自 CodePen 的酷炫 CSS 效果【上篇】

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

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

1. JavaScript Mickey Watch

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

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

2. CSS Submarine

Submarine with CSS by Alberto Jerez (@ajerez).

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

3. ASCII AT-AT

AT-AT by Tim Pietrusky (@TimPietrusky).

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

4. SVG/CSS Loader

Loader SVG/CSS by Bidji (@Bidji).

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

5. 3D CSS Tardis

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

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

6. Dozing Bird

Dozing Bird by Peter Klein (@pmk).

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

7. Pure CSS border animation

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

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

8. Star Wars: The Force Awakens

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

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

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

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

除特别注明外,本站所有文章均基于CC-BY-NC-SA 4.0原创,转载请注明出处。
文章名称:《15个来自 CodePen 的酷炫 CSS 效果【上篇】》
文章链接:https://www.lbyxlz.com/15%e4%b8%aa%e6%9d%a5%e8%87%aa-codepen-%e7%9a%84%e9%85%b7%e7%82%ab-css-%e6%95%88%e6%9e%9c%e3%80%90%e4%b8%8a%e7%af%87%e3%80%91/
分享到: 生成海报

热门文章

    评论 抢沙发

    • QQ号
    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址
    切换注册

    登录

    点击按钮进行验证

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册

    我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活