8个纯CSS3制作的动画应用及源码
对于一个复杂的图形或者动画来说，之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法，然而随着CSS3标准的不断成熟，我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效。本文主要是分享了8个纯CSS3制作的动画应用，提供源代码下载。
1、纯CSS3实现发光开关切换按钮
前段时间我们向大家分享过一款牛奶般剔透的CSS3 3D开关按钮，效果相当赞。今天我们要来分享一款类似的纯CSS3发光开关切换按钮，它的外观就像一个电灯的开关，可以左右切换。另外开关上的文字还有发光的特效，整体看上去很有立体感。
2、纯CSS3绘制的火龙图像
这又是一款用纯CSS3绘制的动画特效，这次是一个纯CSS3绘制的火龙图像，整条龙没有使用一张图片，完全利用了CSS3的特性。小火龙的样子还是挺逼真的，大家觉得呢？
3、HTML5 3D点阵列波浪翻滚动画
还记得之前分享过的两款HTML5 3D波浪动画特效么？它们是纯CSS3/HTML5实现3D波浪形动画和HTML5 WebGL实验 超酷的HTML5 Canvas波浪墙，其中一款利用WebGL让3D效果渲染得淋漓尽致，不过也消耗CPU。今天我们要再分享一款基于HTML5 3D的点阵列波浪翻滚动画特效，同样是非常的壮观。
4、纯CSS3天气动画图标
这是一款基于纯CSS3的天气动画图标，利用CSS3特性，我们在这里绘制了7个关于天气的图标，并且每一个图标都有一套代表当前天气的动画特效，比如下雨天气，就会有下雨的动画，下雪也是如此。这些CSS3天气图标可以应用在关于天气预报的应用中。
5、纯CSS3实现人物摇头动画
这次我们要来分享一款超级可爱的纯CSS3人物摇头动画，初始化的时候人物的各个部位是利用CSS3动画效果拼接而成，接下来就是人物听音乐的场景，一边听音乐一边摇着脑袋，十分陶醉的样子，周围还会出现跳动的音符动画。
6、纯CSS3实现3D效果iPhone 6动画
iPhone 6刚发布不久，今天我们就用纯CSS3来把iPhone 6的外观简单地绘制出来，记得是用纯CSS3实现的哦，没有用一张图片。由于CSS3特性的运用，整个iPhone 6手机边框带有阴影，很有立体3D的视觉效果。
7、纯CSS3立体动画菜单 菜单项按下有内阴影
这次小编来分享一款利用纯CSS3实现的立体动画菜单，该菜单的实现非常简单，并没有太多的特效渲染，但是看起来却非常干净漂亮，尤其配合灰黑色的背景，让菜单显得有点立体的感觉。另外，当我们点击菜单项时，菜单项将会出现内阴影的视觉效果。
8、纯CSS3绘制的黑色图标按钮组合
这是一款基于纯CSS3的图标组合，利用CSS3，我们基本可以在网页上绘制全部矢量图形，因为CSS3的出现我们可以绘制曲线了。这款图标是黑色风格的，有几个复杂的图案需要用多层CSS代码才能实现，大部分图标的绘制还是比较简单的。
以上就是8个纯CSS3制作的动画应用及源码，欢迎收藏分享。 本文链接：http://www.html5tricks.com/8-pure-css3-animations.html
8个纯CSS3制作的动画应用及源码的更多相关文章
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
- 纯css3实现的动画加载条
之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...
- 纯css3实现的动画加载特效
之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="wrap& ...
- CSS源码之纯css3制作的哆啦a梦图片
本文章向大家介绍一个纯css3制作的哆啦a梦图像,主要巧妙的使用了css3的border-radius属性,需要的朋友介意参考一下本文章的源码. 效果图: 源码 <!doctype html&g ...
- 一款纯css3实现的动画按钮
今天给大家分享一款纯css3实现的动画按钮.第一排的按钮当鼠标经过的背景色动画切换,图标从右侧飞入,第二排的按钮当鼠标经过的时候边框动画切换,图标右侧飞入,效果非常好,一起看下效果图: 在线预览 ...
- 一款纯css3实现的动画加载导航
之前为大家介绍了好几款导航菜单,今天为给大家再带来一款纯css3实现的动画加载导航.该导航出现的时候以动画的形式出现.效果图如下: 在线预览 源码下载 实现的代码. html代码: <ul ...
- 纯css3加载动画
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name= ...
- 纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载
随机推荐
- 利用java反射排查一次线上问题(确定问题及问题定位)
背景 hive 用的 1.1.0版本(其实这个版本bug挺多,包括执行计划串列的等等问题吧,建议大家如果选1.x版本用1.2.2吧),一下提到的代码部分如无特殊说明都是hive-1.1.0版本. 前段 ...
- 白鹭引擎 - 资源文件的加载 ( RES, loadConfig, loadGroup )
class Main extends egret.DisplayObjectContainer { public constructor() { super(); this.addEventListe ...
- ln: 创建符号链接 "/usr/bin/java": 文件已存在
执行下述命令创建软链接 #ln -s $JAVA_HOME/bin/java /usr/bin/java 出现下述错误提示: ln: 创建符号链接 "/usr/bin/java": ...
- js对象及元素复制拷贝
1.数组及对象拷贝: 浅拷贝var b=$.extend(false,{},a);//对象浅拷贝 var a={aa:111,bb:{bb1:22}}; var b=$.extend(false,{} ...
- Spring cloud（2）B Eureka 注册微服务到服务中心
1.在provide上添加pom(必须加上web) 如果不加 启动后就会自己关闭 <dependency> <groupId>org.springframework.clo ...
- js 验证码倒计时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- PHP中Notice: unserialize(): Error at offset of bytes in on line 的解决方法
使用unserialize函数将数据储存到数据库的时候遇到了这个报错,后来发现是将gb2312转换成utf-8格式之后,每个中文的字节数从2个增加到3个之后导致了反序列化的时候判断字符长度出现了问题, ...
- 微服务-springcloud
感觉微服务都差不多概念,最近稍微看了下springcloud,感觉入门还是很简单的,框架用用就那么回事,深入的话需要很多时间投入了 学一个东西,我推荐首先从概念上了解到他是做什么的,什么时候需要,基本 ...
- HBASE小结--待续使用
构建在HDFS之上的分布式,面向列的存储系统,使用zookeeper做协同服务,在需要实时读写和随机访问超大规模数据集的时候使用 缺点:非关系型,不支持SQL,数据类型单一(字符串,无类型),之支持单 ...
- mybatis 获取insert返回的主键
在我们开发过程中,在插入数据到数据库时,很多时候都需要把其主键返回,这里就说一下mybatis是怎么获取的. 其中mysql和oracle是不同的做法,因为mysql本身就提供字段自增的属性,而ora ...