一、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. MVC validate.js下使用 ajaxSubmit

    首页定义验证实体 using System.ComponentModel.DataAnnotations; using System.Web.Mvc; namespace MvcApplication ...

  2. session和cookie的区别

    cookie机制和session机制的区别     具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案.     同时我们也看到,由于才服务器 ...

  3. 构建hibernate

    package hanqi.dao; import org.hibernate.Session; import org.hibernate.SessionFactory; import org.hib ...

  4. Javascript正则构造函数与正则表达字面量&&常用正则表达式

    本文不讨论正则表达式入门,即如何使用正则匹配.讨论的是两种创建正则表达式的优劣和一些细节,最后给出一些常用正则匹配表达式. Javascript中的正则表达式也是对象,我们可以使用两种方法创建正则表达 ...

  5. MongoDB一键式安装工具

    一. 需求 不知道有多少人会像我一样,会把MongoDB用在客户端应用上,不过我感觉应该非常少.于是,我就希望能在客户机器上尽可能简单方便的安装MongoDB.所以以下是我的一些取舍: 1. 我只使用 ...

  6. MySQL存储过程及触发器

    一.存储过程 存储过程的基本格式如下: -- 声明结束符 -- 创建存储过程 DELIMITER $ -- 声明存储过程的结束符 CREATE PROCEDURE pro_test() --存储过程名 ...

  7. C#将一个excel工作表根据指定范围拆分为多个excel文件

    C#将一个excel工作表根据指定范围拆分为多个excel文件 微软Excel没有提供直接的方法来拆分excel文件,因此要拆分一个excel文件最简单的方法可能就是手动剪切和粘贴了,除此之外,还有其 ...

  8. ProgressBar

    <1>基本信息设置 progressBar1.Maximum = 1000;    //设置ProgressBar的最大值 progressBar1.Value = 0;         ...

  9. js修改不了input的值

    奇怪的input 今天想做一个通过点击按钮,修改input值的控件,但是点击按钮后,input值变成修改的值后又变回了原来的值,百思不得其解,代码如下 <form> <div cla ...

  10. MySQL PXC构建一个新节点只需IST传输的方法

    需求场景:原有的pxc环境数据量已经比较大,新买的服务器要加入此集群中,如何让其用IST的方式传输,而不是SST. PXC传输数据有两种方式: IST: Incremental State Trans ...