第十一节（项目实战1-高大上动态效果）

最新推荐文章于 2025-03-28 16:47:05 发布

Phoebe_Wu2016

最新推荐文章于 2025-03-28 16:47:05 发布

阅读量134

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Deng1185246160/p/4245570.html

版权

注：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>

效果展示：此图内涵动画炫酷动画效果