一、CSS3画机器猫

http://keleyi.com/keleyi/phtml/html5/3.htm

哆啦A梦效果图：

可用于浏览器对CSS3支持情况的测试

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

二、纯CSS3动画

发现一个有趣的CSS3效果，可以研究研究，先放到柯乐义网上。

请使用支持CSS3（HTML5）的浏览器访问查看效果：
http://keleyi.com/keleyi/phtml/html5/6.htm

支持HTML5的浏览器,例如：Chrome,火狐

效果图：

<!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>

http://keleyi.com/keleyi/phtml/html5/2.htm

http://www.cnblogs.com/jihua/p/css3.html

发现两个有趣的CSS3效果的更多相关文章

  1. 有趣的CSS3背景 斜条纹

    今天逛的时候发现了一个有趣的css3实现的背景效果,代码实现 .noaccess { position: absolute; width: 300px; height: 100px; z-index: ...

  2. 精选12个时尚的 CSS3 效果【附源码下载】

    这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...

  3. 颗粒翻页（css3效果展示）

    用css3效果做了一个颗粒翻页效果,布局上,一张图片做底层,在这张图片上用js创建一层小的行和列各为r和c的小span,给这些span分别设置background-position:用来覆盖原来的一张 ...

  4. 12款令程序员惊叹的CSS3效果库

    最新的CSS3都配备了新的特性,来设计创建动画和互动的网页.在本文中,可以找到一些非常优秀的CSS3效果库,来让你的Web设计看起来更加引人注目.还在等什么?让我们一起看起来吧! Animate.cs ...

  5. 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  6. WPF 有趣的动画效果

    WPF 有趣的动画效果         这一次我要呈上一个简单的文章,关于给你的WPF apps加入美丽的光线动画,可是我对动画这东西可能有点入迷了.         实际上.我对动画如此的入迷,以至 ...

  7. 让你心动的 HTML5 & CSS3 效果【附源码下载】

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

  8. 8个前沿的 HTML5 & CSS3 效果【附源码下载】

    作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...

  9. 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】

    新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程]   作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...

随机推荐

  1. WebDriver--操控浏览器

    前一篇讲述了元素的定位方法,现在开始练习如何写自动化测试脚本 我使用的编辑工具是PyCharm,今后该博客中所写的有关Python脚本,都是在该工具中编写的. WebDriver提供了控制浏览器大小. ...

  2. Android笔记——eclipse快捷键

    查看快捷键定义的地方 Window->Preferences->General->Keys. 编辑相关快捷键 1. [ALT+/] 自动提示方法 此快捷键为用户编辑的好帮手,能为用户 ...

  3. 在不动用sp_configure的情况下，如何 =》去掉列的自增长，并保留原数据

    异常处理汇总-数据库系列  http://www.cnblogs.com/dunitian/p/4522990.html 后期博客首发:http://dnt.dkill.net/Article/Det ...

  4. 今天不谈技术，说说一些常用的软件~By 逆天

    前端工具:http://www.cnblogs.com/dunitian/p/5640147.html    在线办公: http://word.baidu.com/welcome.html http ...

  5. 【Win 10应用开发】认识一下UAP项目

    Windows 10 SDK预览版需要10030以上版本号的Win 10预览版系统才能使用.之前我安装的9926的系统,然后安装VS 2015 CTP 6,再装Win 10 SDK,但是在新建项目后, ...

  6. xcode常见错误处理

    问题:xcode 7编译错误:bitcode is not supported on versions of iOS prior to 6.0 解决:Build Options | Enable Bi ...

  7. 深入学习jQuery鼠标事件

    × 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...

  8. Java基础之类Class使用

    大家都知道Java是一门面向对象编程语言,在Java世界里,万事万物皆对象,那个Java中怎么表示对象呢?Class 我们知道Java中的对象都是Object类的子类,那么今天我们就一起来研究一下Ja ...

  9. CSS之水平垂直居中

    在css的世界里,如果我们想让一个块级元素水平居中,想必大家都知道利用margin:0 auto;嘛,这样就可以让块级元素在它的父元素中水平居中了. 列如这样: <!DOCTYPE html&g ...

  10. BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

    很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正 ...