一、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. CSS3新特性,绘制常见图形

    前言:最近准备做一个自己的网页,设计稿中导航我准备设计成矩形,也有hover样式展示的矩形,当中一些头像等等.以前除了画圆,好像真没认真画过其他图形,今天就画画我们常见到的几个图形. 在此之前我们有必 ...

  2. ajax实现上传文件

      1.html部分 <input style="width: 280px" type="file" name="upLoadProjectPl ...

  3. .NET平台开源项目速览(4).NET文档生成工具ADB及使用

    很久以前就使用ADB这个工具来生成项目的帮助文档.功能强大,在学习一些开源项目的过程中,官方没有提供CHM帮助文档,所以为了快速的了解项目结构和注释.就生成文档来自己看,非常好用.这也是一个学习方法吧 ...

  4. 【原创】开源Math.NET基础数学类库使用(11)C#计算相关系数

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  5. 使用Genymotion调试出现错误INSTALL_FAILED_CPU_ABI_INCOMPATIBLE解决办法

    需要下载Genymotion-ARM-Translation_v1.1.zip  ARM插件包 用于安装ARM架构的程序,将下载好的zip包用鼠标拖到虚拟机窗口中,出现确认对跨框点OK就行.然后重启你 ...

  6. JavaScript阻塞剖析与改善

    一.阻塞特性 <高性能JavaScript>一书中,关于第一章“Loading and Execution”,提到了无阻塞加载JavaScript技术,目的是为了提高页面呈现速度. 说到无 ...

  7. Jenkins+SVN+tomcat持续集成发布

    有代码更新后重新打包到tomcat再发布,是不是很烦? 看了下面的东西你就不会烦了. SVN或者git等代码版本控制工具不说了,如果是本地开发,也可以安装一个svn server端 jenkins下载 ...

  8. Rust初步（四）：在rust中处理时间

    这个看起来是一个很小的问题,我们如果是在.NET里面的话,很简单地可以直接使用System.DateTime.Now获取到当前时间,还可以进行各种不同的计算或者输出.但是这样一个问题,在rust里面, ...

  9. EntityFramework 如何进行异步化（关键词：async·await·SaveChangesAsync·ToListAsync）

    应用程序为什么要异步化?关于这个原因就不多说了,至于现有项目中代码异步化改进,可以参考:实际案例:在现有代码中通过async/await实现并行 这篇博文内容针对的是,EntityFramework ...

  10. win7系统下如何配置php-Apache-mysql环境

    如何在win7系统下配置php环境呢,php+Apache+mysql都是在配置过程中必不可少的元素,php负责解析php代码,apache负责服务器端而mysql是数据交互的中转站. 那么如何将ph ...