HTML5的动画

最新推荐文章于 2024-02-15 09:15:57 发布

XinHenz

最新推荐文章于 2024-02-15 09:15:57 发布

阅读量233

点赞数

本文链接：https://blog.csdn.net/xinghen1234/article/details/78948590

版权

@-webkit-keyframes name {
            from {
                transform: rotate(360deg);
            }
            10% {
                transform: rotate(324deg);
            }
            20% {
                transform: rotate(288deg);
            }
            30% {
                transform: rotate(252deg);
            }
            40% {
                transform: rotate(216deg);
            }
            50% {
                transform: rotate(180deg);
            }
            60% {
                transform: rotate(144deg);
            }
            70% {
                transform: rotate(108deg);
            }
            80% {
                transform: rotate(72deg);
            }
            90% {
                transform: rotate(36deg);
            }
            to {
                transform: rotate(0deg);
            }
        }
        #a12:hover{
            transform: scale(0.5);
        }
        #a22:hover{
            transform: scale(2.5);
        }

    </style>

    <body>
        <img id="baidu" src="img/baidu.png" />
        <form id="form01">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <th><input type="search" placeholder="请输入" id="shuru"></th>
                    <td><input type="button" value="百度一下" id="sousuo"></td>
                </tr>
            </table>
            <table id="table01">
                <tr>
                    <td><img src="img/a10.jpg" id="a10" onmouseover="start()" onmouseout="stop()"></td>
                    <td><img src="img/a11.jpg" id="a11"></td>
                    <td><img src="img/a12.jpg" id="a12"></td>
                    <td><img src="img/a3.jpg" id="a3"></td>
                    <td><img src="img/a4.jpg" id="a4"></td>
                </tr>
                <tr>
                    <td><img src="img/a10.jpg" id="a20" style="" onmouseenter="start02()" onmouseout="stop()"></td>
                    <td><img src="img/a11.jpg" id="a21"></td>
                    <td><img src="img/a12.jpg" id="a22" ></td>
                    <td><img src="img/a3.jpg" id="a23"></td>
                    <td><img src="img/a4.jpg" id="a24"></td>
                </tr>
            </table>

        </form>
        <script type="text/javascript">
            function start() {

                var a10 = document.getElementById("a10");
                var a11 = document.getElementById("a11");
                var a12 = document.getElementById("a12");
                var a3 = document.getElementById("a3");
                var a4 = document.getElementById("a4");

                a10.setAttribute("class", "asd");
                a11.setAttribute("class", "asd");
                a12.setAttribute("class", "asd");
                a3.setAttribute("class", "asd");
                a4.setAttribute("class", "asd");
            }

            function start02() {

                var a10 = document.getElementById("a20");
                var a11 = document.getElementById("a21");
                var a12 = document.getElementById("a22");
                var a3 = document.getElementById("a23");
                var a4 = document.getElementById("a24");

                a10.setAttribute("class", "qwe");
                a11.setAttribute("class", "qwe");
                a12.setAttribute("class", "qwe");
                a3.setAttribute("class", "qwe");
                a4.setAttribute("class", "qwe");
            }


            function stop() {
                history.go(0)

            }
        </script>