js使用animation

来源：互联网发布：软件著作权独占许可编辑：程序博客网时间：2024/05/23 10:30
<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>        <script type="text/javascript">            function start() {                document.getElementById("i1").style.animation = "imag1 3s forwards";                document.getElementById("i2").style.animation = "imag1 3s forwards";                document.getElementById("i3").style.animation = "imag1 3s forwards";                document.getElementById("i4").style.animation = "imag1 3s forwards";                document.getElementById("i5").style.animation = "imag1 3s forwards";            }            function start2() {                document.getElementById("i8").style.animation = "imag2 3s forwards";                document.getElementById("i9").style.animation = "imag2 3s forwards";                document.getElementById("i10").style.animation = "imag2 3s forwards";                document.getElementById("i11").style.animation = "imag2 3s forwards";                document.getElementById("i12").style.animation = "imag2 3s forwards";            }            function stop() {                history.go(0);            }        </script>        <style type="text/css">            .body1 {                width: 1300px;                height: 750px;                background: url(img/qq.jpg);                margin: 0 auto;            }            .tb1 {                margin: 0px auto;                padding-top: 100px;            }            .tr td {}            #inputtext:hover {                -webkit-animation: inputt 3s forwards;            }            #qqq:hover {                -webkit-animation: qqq 3s forwards;            }            #btn:hover {                -webkit-animation: btn 3s forwards;            }            @-webkit-keyframes imag1 {                1% {                    transform: rotate(0deg);                }                100% {                    transform: rotate(360deg);                }            }            @-webkit-keyframes imag2 {                from {                    transform: rotate(360deg);                }                to {                    transform: rotate(0deg);                }            }            @-webkit-keyframes qqq {                1% {                    transform: scale(1);                }                100% {                    transform: scale(1.2);                }            }            @-webkit-keyframes btn {                1% {                    transform: scale(1);                    color: white;                }                100% {                    transform: scale(2);                    color: red;                }            }            @-webkit-keyframes inputt {                1% {                    transform: scale(1);                }                100% {                    transform: scale(1.5);                }            }        </style>    </head>    <body>        <div class="body1">            <img src="img/qqq.jpg" id="qqq" style="position: relative;left: 770px; top: 245px;" />            <table cellspacing="" cellpadding="7" class="tb1">                <tr align="center">                    <td colspan="5"><img style="opacity: 0.5;" src="img/q1.jpg"></td>                </tr>                <tr align="center">                    <td colspan="5"><input type="text" id="inputtext" style="width: 380px;height: 30px;"><input type="button" id="btn" value="百度一下" style="background-color: #3388FF;color: white; height: 36px;width: 80px;"></td>                </tr>                <tr align="center">                    <td colspan="5" height="60px"></td>                </tr>                <tr class="tr" id="tr1">                    <td><img src="img/q3.jpg" class="tr2" id="i1" onmouseenter="start()" onmouseleave="stop()"></td>                    <td><img src="img/q4.jpg" class="tr2" id="i2"></td>                    <td><img src="img/q5.jpg" class="tr2" id="i3"></td>                    <td><img src="img/q6.jpg" class="tr2" id="i4"></td>                    <td><img src="img/q7.jpg" class="tr2" id="i5"></td>                </tr>                <tr class="tr">                    <td><img src="img/q8.jpg" id="i8" onmouseenter="start2()" onmouseleave="stop()"></td>                    <td><img src="img/q9.jpg" id="i9"></td>                    <td><img src="img/q10.jpg" id="i10"></td>                    <td><img src="img/q11.jpg" id="i11"></td>                    <td><img src="img/q12.jpg" id="i12"></td>                </tr>            </table>        </div>    </body></html>
阅读全文
0 0