赞!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 制作的 《星球大战》电影片头标题效果。

9. 3D Synth

Pure CSS 3D Synthesizer (mousedown for rotation) by Nikolay Talanov (@suez).

使用纯 CSS 制作的 3D 电子琴效果,点击鼠标可以旋转。

10. Cascading Solar System

Cascading Solar System! by Tady Walsh (@tadywankenobi).

太阳系的模型,完成了旋转速度、卫星和每一个大的行星的细节。看起来就像现实世界的东西!

11. 3D Solar System

Full CSS 3D Solar System by Wayne Dunkley (@waynedunkley).

另一个太阳系的系统模型,不过这个是 3D 的,有美丽的阴影效果。

12. Flat Design Camera

Flat design camera with CSS animation by Damien Pereira Morberto (@damienpm).

使用CSS动画模拟在相机上按下快门,拍摄照片的动画效果。

13. Day and Night Transition

Day Night simulation by Szymon Stypa (@Catagen).

点击下面的按钮可以看到白天和黑夜的模拟效果。

14. Animated Sprite with CSS

Animate sprite with CSS by Avaz Bokiev (@samarkandiy).

示范序列图像(雪碧图)可以用来创建定格动画,配有正向和反向运动。

15. Dodecahedron

Dodecahedron by wontem (@wontem).

一个完全用 CSS 创建的微妙的,美丽的十二面体动画。

您可能感兴趣的相关文章

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

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

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

时间: 2024-10-06 19:49:14

赞!15个来自 CodePen 的酷炫 CSS 动画效果的相关文章

15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子,这些 Demo 可以说都是艺术品.(为保证最佳的效果,请在 Chrome.Firefox 和 Safari 等现代浏览器中浏览) 9. 3D Synth Pure CSS 3D Synthesizer (mousedown for rotation

12个来自 Codrops 的创新交互和动画效果

产品的用户体验是否被用户所接受,很大一部分取决于交互界面的设计,交互界面设计是整个产品设计中的核心,对于产品品质有着决定性的影响.这里集合了12个来自 Codrops 的创新的界面交互和动画效果,值得我们去研究和使用. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读文章集锦 经典网页设计:25个应用视差滚动单页网站 经典网页设计:20个新鲜出炉 HTML5 网站 经典网页

用 CSS 实现酷炫的动画充电效果

巧用 CSS 实现酷炫的充电动画 循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果. 画个电池 当然,电池充电,首先得用 CSS 画一个电池,这个不难,随便整一个: 欧了,勉强就是它了.有了电池,那接下来直接充电吧.最最简单的动画,那应该是用色彩把整个电池灌满即可. 方法很多,代码也很简单,直接看效果: 有内味了,如果要求不高,这个勉强也就能够交差了.通过蓝色渐变表示电量,通过色块的位移动画实现充电的动画.但是总感觉少了点什么. 增加阴影及颜色的变化 如果要继续优化的话,需要添加点

【OneAPM】极客编程挑战#025:发挥想象生成漂亮炫酷的SVG动画效果

活动链接:http://www.gbtags.com/gb/share/5610.htm 本期挑战 提供如下的SVG图形,请使用任何技术生成基于如下SVG图形的动画效果,看看谁设计的动画效果最酷 ~~ <svg width="720px" height="486px"> <g id="layer1"> <path style="fill:#888888" d="m 434.02002,3

超级酷炫的悬浮效果

今天在奇舞周刊上看到了一篇文章,看到其酷炫的效果,自己忍不住试了一下,小伙伴们都惊呆了...这个效果是将光标移动到按钮上的不同位置产生的彩色渐变. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,

photoshop打造超酷炫火焰人像效果

效果图看上去非常的酷.制作方法跟火焰字过程差不多.唯一不同的是前期的处理,需要用滤镜把人物轮廓路径找出来,去色后再用制作火焰的过程制作.最后把最好的火焰叠加到人物上面,适当用蒙版控制区域即可.原图 最终效果 1.打开一张人物图像,最好是黑白对比还不错的,别太灰色调了. 2.打开图像后复制一张文档出来,在标题栏上单击右键复制. 3.这样就有2张图像,可以把第一张开始做效果. 4.将图像 滤镜--风格化--查找边缘. 5.继续将图像去色 ctrl+shift+u,然后在按反向ctrl+i. 6.图像

Android 常用效果(各种进度条,酷炫loading动画,火箭升空,撒花以及趋势图)

最近时间比较充裕一些,总结了下几个项目用到的ui效果,在这边共享给大家,也给自己做个记录(后面会有demo贴出). 主要是以下几种ui效果: 进度条多种展示 开源loading动画 火箭升空 撒花效果(仿微信) 气温趋势图 一.进度条 这边主要是有四种进度条展示,具体效果请往下看: 二.开源loading动画 这边有两种动画,来自于网上的开源demo,第一种是市场上app的比较常见动画,第二种是新版58的加载动画,具体效果请往下看: 三.火箭升空 这是在公司的一键清理项目中用到的一个动画,主要是

Android 教你亲手打造酷炫的弹幕效果

公司的新产品上线需要添加的弹幕功能,于是花了一天时间写了一个Demo. 效果实现如下: 一开始的思路是: 1.首先实现一个自定义的Layout,在其中获得需要展示的弹幕数组,每个弹幕数组的项包括弹幕文本以及图片Url地址. 2.在Layout内部使用Handler或者计时线程循环发送弹幕. 3.弹幕实现采用自定义弹幕View,配合动画实现滚屏呈现. 总结之后发现主要的难点还是在弹幕的出现位置选择以及弹幕如何确保及时销毁上(我会说一开始调试的时候出现满屏弹幕的华丽场景么..),以及如何实现组件的复

Android酷炫实用的开源框架——UI框架(转)

转载别人整理好的文章,列出了很多炫酷的UI开源设计 原文地址:http://www.androidchina.net/1992.html 1.Side-Menu.Android分类侧滑菜单,Yalantis 出品.项目地址:https://github.com/Yalantis/Side-Menu.Android 2.Context-Menu.Android可以方便快速集成漂亮带有动画效果的上下文菜单,Yalantis出品.项目地址:https://github.com/Yalantis/Con