发现两个有趣的CSS3动画效果


Posted in HTML / CSS onAugust 14, 2013

一、CSS3画机器猫 

哆啦A梦效果图:
发现两个有趣的CSS3动画效果 
可用于浏览器对CSS3支持情况的测试

但最近有人对这个测试表示怀疑,指该测试使用了偏向性代码,测试的CSS代码偏向于支持Chrome,Safari等Webkit浏览器。

二、纯CSS3动画
发现一个有趣的CSS3效果,可以研究研究,先放到柯乐义网上。
http://keleyi.com/keleyi/phtml/html5/6.htm
请使用支持CSS3(HTML5)的浏览器访问查看效果: 
支持HTML5的浏览器,例如:Chrome,火狐
效果图:
发现两个有趣的CSS3动画效果

复制代码
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>纯CSS3实现动画</title>
<link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/html5/6/webkit_keyframes.css" type="text/css">
<link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/html5/6/moz_keyframes.css" type="text/css">
<link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/html5/6/common.css" type="text/css">
<style type="text/css">
.ke-content{backgroud:none}
</style>
</head>
<body>
<div><a href="http://keleyi.com/a/bjac/nmwpqgag.htm" target="_blank">原文</a></div>
<div id="canvas">
<div class="sky">
<div class="cloud-1"></div>
<div class="cloud-2"></div>
<div class="cloud-3"></div>
<div class="cloud-4"></div>
<div class="cloud-5"></div>
<div class="cloud-6"></div>
<div class="cloud-7"></div>
<div class="cloud-8"></div>
</div>
<div class="horizon"></div>
<div class="ground">
<div class="sign-best"></div>
<div class="sign-no-js"></div>
<div class="sign-lots-of-divs"></div>
<div class="sign-all-css"></div>
</div>
<!-- skeleton and shadow -->
<div class="shadow"></div>
<div class="me">
<div class="torso">
<div class="left leg">
<div class="left thigh">
<div class="left shin">
<div class="left foot">
<div class="left toes"></div>
</div>
</div>
</div>
</div>
<!-- left leg -->
<div class="right leg">
<div class="right thigh">
<div class="right shin">
<div class="right foot">
<div class="right toes"></div>
</div>
</div>
</div>
</div>
<!-- right leg -->
<div class="left arm">
<div class="left bicep">
<div class="left forearm"></div>
</div>
</div>
<!-- left arm -->
<div class="right arm">
<div class="right bicep">
<div class="right forearm"></div>
</div>
</div>
<!-- right arm -->
</div>
<!-- torso -->
</div>
<!-- me -->
<div class="overlay"></div>
</div>
</body>
</html>
HTML / CSS 相关文章推荐
介绍CSS3使用技巧5个
Apr 02 HTML / CSS
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
css3的动画特效之动画序列(animation)
Dec 22 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
Jan 27 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 HTML / CSS
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 #HTML / CSS
CSS3正方体旋转示例代码
Aug 08 #HTML / CSS
CSS3 透明色 RGBA使用介绍
Aug 06 #HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 #HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 #HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 #HTML / CSS
CSS3新属性transition-property transform box-shadow实例学习
Jun 06 #HTML / CSS
You might like
建立文件交换功能的脚本(二)
2006/10/09 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
显示js对象所有属性和方法的函数
2009/10/16 Javascript
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
Python模块学习 re 正则表达式
2011/05/19 Python
python字符串替换示例
2014/04/24 Python
教你学会使用Python正则表达式
2017/09/07 Python
python机器学习实战之树回归详解
2017/12/20 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
Python socket实现简单聊天室
2018/04/01 Python
python微信公众号之关键词自动回复
2018/06/15 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
企业与个人合作经营协议书
2014/11/01 职场文书
保证书格式
2015/01/16 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript