赞!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 图形实现的米老鼠钟表效果。
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 动画效果【下篇】》
=======================================================
- 网站开发中很有用的 jQuery 效果【附源码】
- 分享35个让人惊讶的 CSS3 动画效果演示
- 十分惊艳的8个 HTML5 & JavaScript 特效
- Web 开发中很实用的10个效果【源码下载】
- 12款经典的白富美型 jQuery 图片轮播插件
本文链接:赞!15个来自 CodePen 酷炫 CSS 动画效果
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
本文出处【http://www.cnblogs.com/lhb25/】
更多专业前端知识,请上 【猿2048】www.mk2048.com
赞!15个来自 CodePen 的酷炫 CSS 动画效果相关推荐
- js实现酷炫倒计时动画效果
前段时间和朋友去音乐餐厅吃饭,中间有个活动,然后看到他们软件公众号H5有个活动开始的倒计时的动画效果,于是想了下实现思路. <!DOCTYPE html> <html> < ...
- QQuickWidget + QML编程实现酷炫动态动画效果
1.具体需求:当Qt开发项目中需要实现简单的动态酷炫动画效果时,我们可以使用Qt中的QQuickWidget来实现,同时还可以使用QML编程来实现具体的动画效果,具体实现的效果如下所示: 2.具体操作 ...
- Python制作酷炫的动画效果
1 引言 利用Python的Matplotlib-Animation库可以制作酷炫的数学公式动画,官方教程可访问链接. 本文为了清晰说明如何利用Animation类来实现动画效果,这里采用介绍一个点沿 ...
- python做动画视频教程_Python+Kepler.gl轻松制作酷炫路径动画的实现示例
1. 简介 Kepler.gl相信很多人都听说过,作为Uber几年前开源的交互式地理信息可视化工具,kepler.gl依托WebGL强大的图形渲染能力,可以在浏览器端以多种形式轻松展示大规模数据集. ...
- 想实现前端酷炫的打字机效果吗
实现酷炫的打字机效果插件typed.js 前言: 最近在写前端项目的过程中,在逛别人的优质的个人博客的时候,发现一个好玩有趣的东西.看下图,类似在打字的效果,然后又在思考的感觉,感觉整个网页都充满了思 ...
- Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面
本文主要介绍如何使用 Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面 我将向您展示如何使用 Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面,所以不用多说,让我们开始吧.在本课程 ...
- canvas实战之酷炫背景动画(二)
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...
- canvas实战之酷炫背景动画(三)
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...
- html5霓虹效果代码,纯CSS实现酷炫的霓虹灯效果(附demo)
最近关注了油管上的 CSS Animation Effects Tutorial 系列,里面介绍了非常多有意思的 CSS 动效.其中第一个就是很酷炫的霓虹灯效果,这里就实现思路做一个简单的记录和分享. ...
最新文章
- Wedge 100-32X 100GbE Data Center Switch
- OpenMediaVault Redmine 安装
- 如何快速找出找出两个数组中的_找出JavaScript中两个数组之间的差异
- 20135206于佳心【家庭作业汇总】
- 汇编_指令_FLAGS
- mysql time转换输出_MySQL将timediff输出转换为日,时,分,秒格式?
- 使用程序修改域帐户直接领导时遇到的错误
- 容我说下windows linux macosx
- 使用zabbix监控mariadb性能状态
- RabitMQ简介和原理分析(一)
- 蓝桥杯 特殊的回文数 C语言
- 微软成为雅虎财经2021年年度最佳公司
- Qt的对话框与窗口--标准的对话框
- Nobody gives away anything valuable for free.
- ipv6访问文件服务器,开启IPv6,让你的局域网可以使用IPV6进行共享文件夹的访问...
- 编译出现错误:incomplete type ‘WebsocketSession’ used in nested name specifier。
- IOS 固定定位失效的分析与解决办法
- XShell免费版的安装配置教程以及使用教程
- fater-RCNN遇到的错误及其解决方案
- 企业报表插件怎么用?
热门文章
- 配置phoenix连接hbase_Phoenix视图映射
- org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI
- [LintCode笔记了解一下]64.合并排序数组
- Android View相关知识点
- 经典ICP算法的问题
- 刚刚出炉的Asp.net网站部署视频教程
- 天空之城 matlab,[转载]matlab演奏《天空之城》代码
- 错误C4996:'std :: _Copy_impl'
- 小肚皮最新版本_小肚皮旧版本
- JS实现禁止浏览器后退返回上一页