一、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. 初学Python

    初学Python 1.Python初识 life is short you need python--龟叔名言 Python是一种简洁优美语法接近自然语言的一种全栈开发语言,由"龟叔&quo ...

  2. @font-face使用

    转自http://www.tuicool.com/articles/QVf6nei 一.webfont与@font-face 什么是webfont web font,又称之为 在线字体 或者 网络字体 ...

  3. CSS中div覆盖另一个div

    将一个div覆盖在另一个div上有两种手段:一是设置margin为负值,二是设置绝对定位. 可以根个人情况设置z-index的值 1->position 为absolute的情况 <htm ...

  4. BAT及各大互联网公司2014前端笔试面试题--JavaScript篇

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

  5. Ubuntu杂记——链接ln的使用:创建和删除符号链接

    原文链接:http://blog.csdn.net/janpylx/article/details/6761910 一 . 使用方式 ln [option] source_file dist_file ...

  6. 如何在制作jar包时引用第三方jar包

    我用的是Eclipse打包,但在CMD窗口执行的时候报“ActiveMQ.jar中没有主清单属性”错误. 在网上搜了下,这个与MANIFEST.MF文件有关,该文件没有定义MAIN方法所在类的路径,利 ...

  7. Kubernetes集群搭建过程中遇到的问题

    1. 创建Nginx Pod过程中报如下错误: #kubectlcreate -f nginx-pod.yaml Error from server: error when creating &quo ...

  8. JavaScript的Tab切换

    在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...

  9. EntityFramework 7 Join Count LongCount 奇怪问题

    先吐槽一下,EF7 目前来说,真对的起现在的版本命名:"EntityFramework": "7.0.0-beta1". 这篇博文纪录一下:当 Linq 查询中 ...

  10. Linux分区：超过2TB硬盘分区

    测试iscsi服务是否正常 [root@FocusBackup ~]# service iscsi restart 停止 iscsi:                                  ...