发现两个有趣的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制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 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
将OICQ数据转成MYSQL数据
2006/10/09 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
JS的反射问题
2010/04/07 Javascript
Web开发之JavaScript
2012/03/29 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
JS实现滑动插件
2020/01/15 Javascript
详解React 元素渲染
2020/07/07 Javascript
Python 命令行非阻塞输入的小例子
2013/09/27 Python
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
Python实现句子翻译功能
2017/11/14 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
python中安装django模块的方法
2020/03/12 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
常用的10个Python实用小技巧
2020/08/10 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
Ajax和javascript的区别
2013/07/20 面试题
一句话工作感言
2014/03/01 职场文书
校园绿化美化方案
2014/06/08 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书