标签：
注：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{width:100%;background:#000;padding: 65px 0;} .flow .f_all{width:1198px;margin:0 auto;} .flow .f_all dl{width:270px;color:#fff;font-size:14px;text-align:center;float:left;padding-left:25px;} .flow .f_all dl dt{width: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{width: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>
效果展示：此图内涵动画炫酷动画效果
标签：
原文地址：http://www.cnblogs.com/Deng1185246160/p/4245570.html
