动画

最新推荐文章于 2023-02-20 17:22:57 发布

人道烘炉_L

最新推荐文章于 2023-02-20 17:22:57 发布

阅读量142

点赞数

本文链接：https://blog.csdn.net/My_emotions_L/article/details/78444011

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>
           .beijing{
               background-image: url(img/img2.jpg);
               width: 100%;
               width: 1421px;
               height: 761px;
           }

           .da{
               width: 627px;
               height: 42px;
               position: absolute;
               top: 181px;
               left: 405px;
           }
           .da:hover{
               width: 100%;
                width: auto;
                height: 60px;

           }
           .da2{
               width: 29px;
               height: 42px;
               background-color: #fafafc;
               float: right;
           }
           .da2:hover{
               width: 35px;
               height: 50px;
               background-color: #fafafc;
               float: right;
           }
           .da3{
               width: 105px;
               height: 42px;
               background-color: #fafafc;
               float: right;
           }
           .da3:hover{
               width: 210px;
               height: 84px;
               background-color: #fafafc;
               float: right;
           }
           .bai{
               width: 105px;
               height: 42px;
               color: white;
               background-color: #fafafc;
               float: right;
           }
           .bai:hover{
               width: 210px;
               height: 84px;
               color: red;
               background-color: #fafafc;
               float: right;
           }
           .cc{
               width: 100%;
                width: 491px;
                height: 42px;
           }
           .cc:hover{
               width: 100%;
                width: 736px;
                height: 60px;

           }
           /*上方是搜索的事件代码下方是图片的*/
           .t1{
            width: 150px;
            height: 135px;
            background-image: url(img/z12.jpg);
            position: absolute;
            left:398px;
            top:395px;
            margin-left:-75px;
            margin-top:-67px;


           }
            .t1:hover{
                width: 150px;
                height: 135px;
                background-image: url(img/z12.jpg);
                position: absolute;
                left:398px;
                top:395px;
                margin-left:-75px;
                margin-top:-67px;
                animation: xuanzhuan 6s linear infinite;

            }
            .t2{
            width: 150px;
            height: 135px;
            background-image: url(img/z17.jpg);
            position: absolute;
            left:398px;
            top:540px;
            margin-left:-75px;
            margin-top:-67px;


           }
            .t2:hover{
                width: 150px;
                height: 135px;
                background-image: url(img/z17.jpg);
                position: absolute;
                left:398px;
                top:540px;
                margin-left:-75px;
                margin-top:-67px;
                animation: fanzhuan 6s linear infinite;

            }
            .t3{
            width: 150px;
            height: 135px;

            position: absolute;
            left:718px;
            top:540px;
            margin-left:-75px;
            margin-top:-67px;


           }
            .t3:hover{

                position: absolute;
                left:718px;
                top:540px;
                margin-left:-75px;
                margin-top:-67px;
                animation: fangda 3s linear 1;

            }
            .t4{
            width: 150px;
            height: 135px;

            position: absolute;
            left:877px;
            top:540px;
            margin-left:-75px;
            margin-top:-67px;


           }
            .t4:hover{
                position: absolute;
                left:877px;
                top:540px;
                margin-left:-75px;
                margin-top:-67px;
                animation: weiyi 3s linear 1;
            }
           @keyframes xuanzhuan{
               0%{}
               100%{
                   transform:rotate(360deg);
               }
           }
           @keyframes fanzhuan{
               0%{}
               100%{
                   transform:rotate(-360deg);
               }
           }
           @keyframes fangda{
               0%{}
               100%{
                   transform:scale(1.5);
               }
           }
           @keyframes weiyi{
               0%{}
               100%{
                   transform:skewX(-50deg)
               }
           }
           .t5{
            width: 150px;
            height: 135px;

            position: absolute;
            left:556px;
            top:395px;
            margin-left:-75px;
            margin-top:-67px;
           }
           .t6{
            width: 150px;
            height: 135px;

            position: absolute;
            left:718px;
            top:395px;
            margin-left:-75px;
            margin-top:-67px;
           }
           .t7{
            width: 150px;
            height: 135px;

            position: absolute;
            left:877px;
            top:395px;
            margin-left:-75px;
            margin-top:-67px;
           }
           .t8{
            width: 150px;
            height: 135px;

            position: absolute;
            left:1037px;
            top:395px;
            margin-left:-75px;
            margin-top:-67px;
           }
           .t9{
            width: 150px;
            height: 135px;

            position: absolute;
            left:557px;
            top:542px;
            margin-left:-75px;
            margin-top:-67px;
           }
           .t10{
            width: 150px;
            height: 135px;

            position: absolute;
            left:1037px;
            top:542px;
            margin-left:-75px;
            margin-top:-67px;
           }
       </style>
   </head>
   <body>
       <div class="beijing">
                       <div class="da">
                           <input type="text" class="cc" style="background-color: #fafafc; border: 0px;"/>

                           <div class="da3"><input class="bai" type="button" value="百度一下" style=" background-color: #2d8df3; font-size: 17px;border: 0px;"/></div>
                           <div class="da2"><img src="img/z11.jpg" style="width: 29px; height: 42px;"/></div>
                       </div>
           <div class="t1"></div>
           <div class="t2"></div>
           <div class="t3"><img src="img/z19.jpg"/></div>
           <div class="t4"><img src="img/z110.jpg"/></div>
           <div class="t5"><img src="img/z13.jpg"/></div>
           <div class="t6"><img src="img/z14.jpg"/></div>
           <div class="t7"><img src="img/z15.jpg"/></div>
           <div class="t8"><img src="img/z16.jpg"/></div>
           <div class="t9"><img src="img/z18.jpg"/></div>
           <div class="t10"><img src="img/z111.jpg"/></div>

   </body>
</html>