精美动画特效

css简介

CSS 主要用于控制网页的外观，CSS 代码可以随意变化网页的布局和网页的内容样式。当 CSS3 出现以后，更是可以让网页增添了不少动画元素，随着IE6,7的淘汰，手机端的崛起更是让它成熟了许多。CSS3 动画简洁方便，高端大气，让网页变得易于交互且生动有趣。下面给大家准备了几个特效源码

代码部分

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    body{background-color: #171717}
    .box {
        width: 1168px;
        height: 519px;
        background: red;
        margin: 50px auto;
    }

    .item {
        width: 119px;
        height: 519px;
        float: left;
    }

    .item:nth-child(1) {
        background: url("images/feature-1.png") no-repeat 100% 100%;
        /*background-size: 100% 100%; 背景图尺寸 */


    }

    .item:nth-child(2) {
        background: url("images/feature-2.png")  no-repeat 100% 100%;
    }

    .item:nth-child(3) {
        background: url("images/feature-3.png")  no-repeat 100% 100%;
    }

    .item:nth-child(4) {
        background: url("images/feature-4.png")  no-repeat 100% 100%;
    }

    .item:nth-child(5) {
        background: url("images/feature-5.png")  no-repeat 100% 100%;
    }

    .big {
        width: 692px;
    }

    .big img {
        display: none;
        height: 519px;
    }

</style>
<div class="box">
    <div class="item big"><img src="images/01.png" alt=""></div>
    <div class="item"><img src="images/02.png" alt=""></div>
    <div class="item"><img src="images/03.png" alt=""></div>
    <div class="item"><img src="images/04.png" alt=""></div>
    <div class="item"><img src="images/05.png" alt=""></div>
</div>


<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript">
    $(function () {
        $(".item").mouseenter(function () {
            $(this).addClass("big").siblings().removeClass("big");
        });
    });
</script>