对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用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制作的动画应用及源码的更多相关文章

  1. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  2. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  3. 纯css3实现的动画加载条

    之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...

  4. 纯css3实现的动画加载特效

    之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrap& ...

  5. CSS源码之纯css3制作的哆啦a梦图片

    本文章向大家介绍一个纯css3制作的哆啦a梦图像,主要巧妙的使用了css3的border-radius属性,需要的朋友介意参考一下本文章的源码. 效果图: 源码 <!doctype html&g ...

  6. 一款纯css3实现的动画按钮

    今天给大家分享一款纯css3实现的动画按钮.第一排的按钮当鼠标经过的背景色动画切换,图标从右侧飞入,第二排的按钮当鼠标经过的时候边框动画切换,图标右侧飞入,效果非常好,一起看下效果图: 在线预览    ...

  7. 一款纯css3实现的动画加载导航

    之前为大家介绍了好几款导航菜单,今天为给大家再带来一款纯css3实现的动画加载导航.该导航出现的时候以动画的形式出现.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul ...

  8. 纯css3加载动画

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name= ...

  9. 纯CSS3文字Loading动画特效

    纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载

随机推荐

  1. 访问服务器时一直在转圈,等待localhost响应

    之后把zookeeper的服务器的防火墙关了,就有响应了.可能就是防火墙的问题.

  2. Redis 五大数据类型及常用操作

    # 更详细的操作命令请查看 => http://redisdoc.com/ 1: KEY ( 键值 )  => 常见操作 2: String ( 字符串 ), 最大支持 512M 2.1: ...

  3. centos7.5安装VirtualBox

    centos7.5安装minikube时要求先安装VirtualBox 1.准备repo文件 [root@localhost yum.repos.d]# pwd /etc/yum.repos.d [r ...

  4. Django models模型(1)

    1)使用模型需要在INSTALLED_APPS中注册 2)模型字段(字段类型和字段选项) 1.字段类型 常用: CharField,TextField: 对应字符串对象 DateTimeField和D ...

  5. 判断窗体 show完成

    TForm窗体 this->Visible           this->Showing        true: 显示 fale:关闭     这个可用    this->Act ...

  6. leetcode 题解 word search。递归可以更简洁。

    先写上我的代码: 我总是不知道何时把任务交给下一个递归.以致于,写出的代码很臃肿! 放上别人递归的简洁代码: bool exist(char** board, int m, int n, char* ...

  7. Unity 平台依赖编译

    位置:unity文档-Manual-Scripting-Platform dependent compilation Property: Function: UNITY_EDITOR #define ...

  8. python学习笔记之斐波拉契数列学习

    著名的斐波拉契数列(Fibonacci),除第一个和第二个数外,任意一个数都可由前两个数相加得到: 1, 1, 2, 3, 5, 8, 13, 21, 34, ... 如果用Python的列表生成式, ...

  9. 在CentOS7中利用yum命令安装mysql

    在CentOS7中利用yum命令安装mysql 原创 2016年08月31日 10:42:33 标签: mysql / centos 4832 一.说明 我们是在VMware虚拟机上安装的mysql, ...

  10. 【378】python any() and all()

    Reference: [1] Python all() - Python Standard Library [2] Python any() - Python Standard Library all ...