周考代码百度一下+周考一

最新推荐文章于 2022-04-12 17:24:10 发布

ch5211314

最新推荐文章于 2022-04-12 17:24:10 发布

阅读量332

点赞数

本文链接：https://blog.csdn.net/ch5211314/article/details/79189283

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>

       <style>

           body{
               background: url(../img/bb.jpg);

               /*背景图片足够大*/
               background-size: cover;
           }

           .img1{
               width: 400px;
               height: 260px;
               margin-top: 200px;
           }

           .img2 {
           width: 75px;
           height: 75px;
           position: relative;
           top: -80px;
           right: -300px;
       }

       /*小图标鼠标移上去时缩放原来的1.2倍*/
       .img2:hover{
           transform: scale(1.2);
       }


           .input1{    /*设置输入框的大小*/
               width: 1000px;
               height: 80px;
               font-size: 65px;
           }
           .input1:hover{ /* //当鼠标移上去时要做的事情*/
               transform: scale(1.5);
           }

           .input2{
               width: 300px;
               height: 80px;
               font-size: 65px;
               background-color: blue;
           }

           /*百度一下鼠标移上去时缩放原来的2倍.字变成红色*/
           .input2:hover{
               transform: scale(2);
               color: red;

           }


           .asd{

               animation: name1 2s linear;
           }

           @-webkit-keyframes name1{
               10% {
               transform: rotate(36deg);
           }
           20% {
               transform: rotate(72deg);
           }
           30% {
               transform: rotate(108deg);
           }
           40% {
               transform: rotate(144deg);
           }
           50% {
               transform: rotate(180deg);
           }
           60% {
               transform: rotate(216deg);
           }
           70% {
               transform: rotate(252deg);
           }
           80% {
               transform: rotate(288deg);
           }
           90% {
               transform: rotate(324deg);
           }
           100% {
               transform: rotate(360deg);
           }
           }

           #j2:hover{
               transition: all 2s;
               transform: rotate(45deg);
           }



       </style>
   </head>
   <body>

       <center>
           <img src="../img/baidu.png" class="img1"/>

           <table border="0" cellspacing="0">
               <tr>
                   <td><input type="text" class="input1" placeholder="请您输入"></td>
                   <td><input type="button" class="input2" value="百度一下"></td>
               </tr>


           </table>

           <img src="../img/small.png" class="img2"/>


           <table>
               <tr>
                   <td><img src="../img/a3.jpg" id="j1" οnmοuseοver="start()" οnmοuseοut="stop()"></td>
                   <td><img src="../img/a4.jpg" id="j2"></td>
                   <td><img src="../img/a5.jpg" id="j3"></td>
                   <td><img src="../img/a6.jpg" id="j4"></td>
                   <td><img src="../img/a7.jpg" id="j5"></td>

               </tr>


               <tr>
                   <td><img src="../img/a8.jpg" id="j6" οnmοuseοver="start1()" οnmοuseοut="stop()"></td>
                   <td><img src="../img/a9.jpg" id="j7"></td>
                   <td><img src="../img/a10.jpg" id="j8"></td>
                   <td><img src="../img/a11.jpg" id="j9"></td>
                   <td><img src="../img/a12.jpg" id="j10"></td>

               </tr>

           </table>

       </center>

       <script>

           function start(){

               var j1 = document.getElementById("j1");
               var j2 = document.getElementById("j2");
               var j3 = document.getElementById("j3");
               var j4 = document.getElementById("j4");
               var j5 = document.getElementById("j5");

               j1.setAttribute('class', 'asd');
               j2.setAttribute('class', 'asd');
               j3.setAttribute('class', 'asd');
               j4.setAttribute('class', 'asd');
               j5.setAttribute('class', 'asd');
           }


           function stop(){
               history.go(0);
           }

           function start1(){

               var j6 = document.getElementById("j6");
               var j7 = document.getElementById("j7")
               var j8 = document.getElementById("j8")
               var j9 = document.getElementById("j9")
               var j10 = document.getElementById("j10");

               j6.setAttribute("class","asd1")
               j7.setAttribute("class","asd1")
               j8.setAttribute("class","asd1")
               j9.setAttribute("class","asd1")
               j10.setAttribute("class","asd1")
           }



       </script>

   </body>

</html>

---------------------------------------------------------------------------------------------------------------------------------------------------------------