css3 向上淡入 小图标翻转 360度旋转

代码

<!DOCTYPE HTML>
<html>
<style type="text/css">
    div {
        border: 1px solid red;
    }

    /*向上淡入*/
    .wrap {
        width: 800px;
        height: 200px;
        position: relative;
    }

    .moveUpBox {
        position: relative;
        width: 683px;
        height: 99px;
        background: url(1.jpg) no-repeat;
        top: 120px;
        animation: moveUp 0.6s ease-out 0.2s both 1;
        -moz-animation: moveUp 0.6s ease-out 0.2s both 1;
        -webkit-animation: moveUp 0.6s ease-out 0.2s both 1;
    }

    /*小图标翻转*/
    .iconRoll {
        width: 40px;
        height: 40px;
        display: block;
        margin: 2px 0;
        background: url(iconRoll.png);
        position: relative;
        cursor: pointer;
    }

    .iconRoll:hover {
        background: url(iconRoll.png) 0px 40px;
        transition: all 0.2s 0s ease-out;
    }

    /*360度旋转*/
    .roll360 a {
        display: block;
        border: 10px solid red;
        position: relative;
    }

    .roll360 a b {
        display: inline-block;
        width: 240px;
        height: 70px;
        background: url(roll360.png) no-repeat;
        background-position: 0 -140px;
        vertical-align: middle;
        -webkit-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
    }

    .roll360 a:hover b {
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .roll360 a p {
        position: absolute;
        left: 0;
        top: 0;
        background-color: #fff;
        text-align: left;
        color: #333;
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
        -webkit-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .roll360 a:hover p {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: rotateY(360deg);
        -ms-transform: rotateY(360deg);
        -o-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }

    .roll360 a span {
        display: table-cell;
        width: 100%;
        height: 60px;
        border: 1px solid red;
        vertical-align: middle;
    }



    /* animate */
    @keyframes moveUp {
        from {
            top: 120px;
            opacity: 0;
            filter: alpha(opacity=0);
        }

        to {
            top: 0px;
            opacity: 1;
            filter: alpha(opacity=100);
        }
    }

    @-webkit-keyframes moveUp {
        from {
            top: 120px;
            opacity: 0;
            filter: alpha(opacity=0);
        }

        to {
            top: 0px;
            opacity: 1;
            filter: alpha(opacity=100);
        }
    }
</style>

<body>

    <div class="wrap">
        <div class="moveUpBox"> xiaoxiaosix </div>
    </div>

    <div class="iconRoll"></div>

    <div class="roll360">
        <a href="">
            <b></b>
            <p> <span>hello</span> </p>
        </a>
    </div>

</body>

</html>

 

扩展思路：

通过控制 class ，定点播放动画