首页 > 代码库 > 第十一节（项目实战1-高大上动态效果）
第十一节（项目实战1-高大上动态效果）
注：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=http://www.mamicode.com/"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=http://www.mamicode.com/"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>
效果展示：此图内涵动画炫酷动画效果
第十一节（项目实战1-高大上动态效果）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。