注：animate.css跟jquery-1.11.1.min.js文件可网上下载，贴主要代码如下
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";color:#666;}
.flow{100%;background:#000;padding: 65px 0;}
.flow .f_all{1198px;margin:0 auto;}
.flow .f_all dl{270px;color:#fff;font-size:14px;text-align:center;float:left;padding-left:25px;}
.flow .f_all dl dt{136px;height:136px;margin:0 auto;}
.flow .f_all dl .one{background:url("http://www.tanzhouedu.net/images/style/icon1.png") no-repeat;}
.flow .f_all dl .two{background:url("http://www.tanzhouedu.net/images/style/icon2.png") no-repeat;}
.flow .f_all dl .three{background:url("http://www.tanzhouedu.net/images/style/icon3.png") no-repeat;}
.flow .f_all dl .four{background:url("http://www.tanzhouedu.net/images/style/icon4.png") no-repeat;}
.flow .f_all dl .f_first{font-size:16px;font-weight:500;margin: 20px 0 10px 0;}
.flow .f_all dl dd i{50px;height:0;border-bottom:1px solid #fff;display:block;margin:10px auto;}
.flow .f_all dl .f_desc{color:#666;}
/*清楚浮动*/
.clear{clear:both;}
</style>
<!--jQuery的版的css，里边封装了所有的css3的效果-->
<link href="css/animate.css" rel="stylesheet" type="text/css" />
<body>
<div class="flow">
<div class="f_all">
<!--dl start-->
<dl>
<dt class="one"></dt>
<dd class="f_first">
1. 起步
<i></i>
</dd>
<dd class="f_desc">从网页0基础开始，教你布局.</dd>
</dl>
<!--end dl-->
<!--dl start-->
<dl>
<dt class="two"></dt>
<dd class="f_first">
2. 计划
<i></i>
</dd>
<dd class="f_desc">开发通用组件，按钮，弹出，窗口.</dd>
</dl>
<!--end dl-->
<!--dl start-->
<dl>
<dt class="three"></dt>
<dd class="f_first">
3. 执行
<i></i>
</dd>
<dd class="f_desc">同步布局和组件搭建网页效果.</dd>
</dl>
<!--end dl-->
<!--dl start-->
<dl>
<dt class="four"></dt>
<dd class="f_first">
4. 结果
<i></i>
</dd>
<dd class="f_desc">做出各种应用网站和酷炫的效果.</dd>
</dl>
<!--end dl-->
<div class="clear"></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
// 页面加载完成时，执行操作
$(".flow dt").addClass("animated rotateIn");
// 当鼠标滑动到 dl标签的时候
$(".flow dt").hover(function(){
$(this).toggleClass("rotateIn").addClass("flip");
},function(){
$(this).toggleClass("flip").addClass("rotateIn");
});
});
</script>
</body>
效果展示：此图内涵动画炫酷动画效果
