发现两个有趣的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特效之动画:animation的应用
May 09 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 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
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
php header Content-Type类型小结
2011/07/03 PHP
nginx下安装php7+php5
2016/07/31 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
CCPry JS类库 代码
2009/10/30 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
详解Python import方法引入模块的实例
2017/08/02 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
python Matplotlib模块的使用
2020/09/16 Python
理工学院学生自我鉴定
2014/02/23 职场文书
社区党建工作方案
2014/06/10 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
市场营销计划书
2015/01/17 职场文书
异地恋情人节寄语
2015/02/28 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS