今天在网上看到一个国外写的CSS3 3D Bouncing Ball（3D反弹球），很有意思，并且实现起来也不难，于是忍不住自己也试写一遍。

大家可以先看看DEMO，http://www.im050.com/im050/memory/demo/css3-bouncing-ball.html

好玩的东西当然要大家一起分享，所以接下来我就简单讲解一下如何实现跳动的效果

<div class="wrap">
 <div class="ball">
 <div></div>
 </div>
 <div class="ballshadow"></div>
</div>

首先讲解一下结构，wrap是用来控制小球跳动的区域，ball就是小球啦，ballshadow是用来制作小球的投影，因为小球的运动和投影部分的运动（动画）效果是分开的，所以小球和投影部分要两个div来组成，而wrap设置的高度即为小球运动的高度，此时我们就可以通过top属性来很好的控制小球的位置变化。

小球运动区域CSS

.wrap {
 

Animate.css是用CSS3编写的动画合集，拥有数十种元素入场或离场的动画效果，你只需要引入animate.css文件就可以轻松调用里面的动画，为自己的元素增加动画效果。

而我们调用的方法也很简单，首先引入animate.css

<link href="http://daneden.github.io/animate.css/animate.min.css" rel="stylesheet"  />

譬如你的

<div class="circle"></div>

需要调用名为bounce的动画，只需要

<div class="circle bounce animated"></div>

如果想要动画无限循环，再多加一个名为infinite的class

<div class="circle bounce animated infinite"></div>

从事前端开发，使效果能够完美呈现的同时，还会遇到一个不可规避的问题，那就是性能。而DOM Monster则能够辅助你对页面的DOM进行相关的性能调试，并且使用简单，我们只需将DOM Monster添加进书签，在需要他的时候点击他，这样，他就能够替你分析出当前网页中所出现的性能问题及相应的优化方案，诸如提示减少JAVASCRIPT全局变量，某某处有多少空节点，去除他们以提高速度等等。

此外DOM Monster还是一个开源项目，代码以托管在github，如果你想改进他，不凡试一试。

项目地址: http://mir.aculo.us/dom-monster/ 
下载地址: https://github.com/madrobby/dom-monster …

因为代码比较简单，这里就不做过多的解释，直接贴出代码。

点我查看DEMO

下面是CSS代码：

.circle-loading {
	width: 20px;
	height: 20px;
	border: 2px solid #27ae61;
	border-radius: 50%;
	border-bottom: 2px solid transparent;
	animation: 

CSS3与HTML5为网页设计提供了更多的便捷，同时丰富的动画效果也为网页增添了许多鲜活色彩，现在，让我们一起走进CSS3，学习使用CSS3的新增属性绘制一些简单的图示。

今天要教大家制作的是一个会跳动的爱心。

没了DEMO怎么行，点我查看

从图中可以看见，红色线部分所组成的就是一个爱心。

经过分析，我们将爱心的组成方法拆分开来，如下图：

图片构成的方案已经确定，接着我们看看如何利用CSS3代码来实现这一的效果。

首先，我们只需要一个div来包裹这个爱心，通过简单的计算，一个美观的爱心宽高比约为1.2:1

我们创建一个宽200px，高165px的div层，并将其position设置为relative以控制子元素的定位。

.myheart {
	width: 200px;
	height: 165px

在开发触摸屏下的网页时，常常会发现hover所带来的效果并不完美，在iOS系统下，hover的效果并不展现，只有当手指点击时才出现效果，并且返回页面的时候，hover的状态一直保留，所以我们需要使用active伪类来为触摸屏下的网站实现一个点击效果。 如果使用ios系统的朋友还应当有所发现，即点击按钮或链接时，会有一个高亮区域，半透明的黑色背景 那么我们如何来改变这个黑色块的样式？ 在iOS设备中，有一个名为-webkit-tap-highlight-color的属性，即定义了用户点击按钮时所产生的高亮背景 想要禁用这样的高亮效果，我们就需要将他的颜色值改为完全透明

代码如下

body {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}

这是我们就屏蔽了默认的点击黑色背景块的显示。然后接下来我们对我们的按钮进行一个点击设置

首先我们先设置一下CSS

body {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.btn {
width:100px;
height:40px;

无意中在uemo的一个子站点看到一个很动感的hover效果，经过简单分析，想必是通过JS判断鼠标进入方向来实现这个hover效果，使父容器中的子容器通过判断鼠标进入方向，从而使子容器从相同的方向“进入”到父容器中并且从鼠标离开的方向“离开”父容器。下面这一段js代码来源于网络，如果想深入了解代码的意义请跳转

http://sentsin.com/web/112.html

DEMO:

http://www.im050.com/im050/memory/demo/jquery-direction.html

而在津泓橱柜官方网站的制作过程中，在其产品展示页面也使用了这样的效果

具体参见：http://www.jhcg.net/home/product/

HTML代码部分：

<style>
body {margin: 50px;}
#wrap {width: 100px; height: 100px; background: #000}
#result 

看了老赵茶馆的特色图像鼠标滑过效果,于是自己也模仿了一下,不要见怪。
更改你自己的CSS选择器以达到你想控制图片所属的范围。

.article-img img{
	width: 100%;
	display: block;
	height: 100%;
	/* 上述设置是为了使图片自适应容器大小