一、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. int and string

    int转string一.#include <sstream> int n = 0; std::stringstream ss; std::string str; ss<<n; ...

  2. iOS------苹果设备处理器指令集（iPhone初代到iPhone5s）

    (via 雅香小筑) Arm处理器,因为其低功耗和小尺寸而闻名,几乎所有的手机处理器都基于arm,其在嵌入式系统中的应用非常广泛,它的性能在同等功耗产品中也很出色. Armv6.armv7.armv7 ...

  3. iOS --------Crash 分析（一）

    iOS Crash 分析(文一)- 开始 1. 名词解释 1. UUID 一个字符串,在iOS上每个可执行文件或库文件都包含至少一个UUID.目的是为了唯一识别这个文件. 2. dwarfdump 苹 ...

  4. Nginx服务器之 Nginx的基本配置

    本文使用 Linux centos系统 一.Nginx虚拟主机的配置 虚拟主机:通常情况下,为了使每个服务器可以供更多用户使用,可以将一个服务器分为很多虚拟的子服务器,每个子服务器都是互相独立的.这些 ...

  5. JS数字计算精度误差的解决方法

    本篇文章主要是对javascript避免数字计算精度误差的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助. 如果我问你 0.1 + 0.2 等于几?你可能会送我一个白眼,0.1 + 0. ...

  6. SVN：服务器资源删掉，本地添加时和删掉的名字同名出现One or more files are in a conflicted state.

    异常处理汇总-开发工具  http://www.cnblogs.com/dunitian/p/4522988.html

  7. C#设计模式系列：代理模式（Proxy）

    代理模式提供了一个中介控制对某个对象的访问.现实生活中,我们可能会用支票在市场交易中用来代替现金,支票就是账户中资金的代理. 1.代理模式简介 1.1>.定义 代理模式(Proxy)定义:代理模 ...

  8. DOM-Text类型、Comment类型、CDATASection类型、DocumentType类型、DocumentFragment类型、Attr类型

    Text类型 文本节点由Text类型表示,包含的是可以照字面解释的纯文本内容.Text节点具有以下特征: nodeType的值为3 nodeName的值为"text" nodeVa ...

  9. iOS chart 图表完美解决方案 基于swift

    如果打算在app中使用图标功能,这个框架基本能够满足90%的需求 下边是作者的框架的下载地址 ,基于swift2.0 https://github.com/danielgindi/ios-charts ...

  10. 用PHP抓取页面并分析

    在做抓取前,记得把php.ini中的max_execution_time设置的大点,不然会报错的.