网页动画简单展示

<style>
    body{
    /*
     设置背景颜色平铺
     * */
    background-image: url(../img/bb.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    }
    .img{
        margin-left: 22cm;
        margin-top: 100px;
    }
    .tex{
        margin-left: 20cm;
        margin-top: 10px;

    }
    #anniu{
        background-color: #0000FF;
        color: #FFFFFF;
        width: 5cm;
        height: 1.2cm;
        font-size: 0.5cm;
    }
    #kuang{
        width: 8cm;
        height: 1cm;


    }
    #kuang:hover{
        transform: scale(1.5);
    }
    #anniu:hover{
        transform: scale(2);
        color: #f00;
    }
    img{
        width: 200px;
        height: 100px;
    }
    /*
     旋转速度
     * */
    #one:hover{
        animation: one 3s ease-out;

    }
    @-webkit-keyframes one{
        100%{
            transform: rotate(360deg);
        }
    }

    .two:hover{
            animation: two 3s ease-out;
    }
    @-webkit-keyframes two{
        100%{
            transform: rotate(-360deg);
        }
    }
    /*缩放*/
    .three:hover{
    transform: scale(1.5);
    }
    /*倾斜*/
    .si:hover{
        transform: skew(50deg);
    }
    #tu{
        position: absolute;
        margin-left: -48px;
        margin-top: 3px;
    }
    #tu:hover{
        transform: scale(2);
    }
</style>
</head>
<body>
    <div class="til">
        <div class="titl">
            <div class="im">
                <img src="../img/baidu.png" class="img"/>
            </div>
            <div class="tex">
                <span>
                <input type="text"name="baidu" id="kuang"/>
                <input type="image" id="tu"src="../img/small.png" />
                <input type="submit" value="百度一下" id="anniu"/>
                </span>
            </div>

        </div>
    </div>
    <!--表格显示图片-->
    <table align="center" style="margin-top: 120px;">
            <tr>
                <td id="one"><img src="../img/i.jpg" /> </td> 
                <td><img src="../img/i.jpg" /> </td> 
                <td><img src="../img/i.jpg" /> </td> 
                <td><img src="../img/i.jpg" /> </td> 
                <td><img src="../img/i.jpg" /> </td> 
            </tr>
                <tr>
                <td class="two"><img src="../img/i.jpg" /> </td> 
                <td><img src="../img/i.jpg" /> </td> 
                <td class="three"><img src="../img/i.jpg" /> </td> 
                <td class="si"><img src="../img/i.jpg" /> </td> 
                <td><img src="../img/i.jpg" /> </td> 
            </tr>
        </table>
</body>
网页动画简单展示

猜你喜欢
