图片应用与帧动画_图片的src能够设置帧动画吗-CSDN博客

本文链接：https://blog.csdn.net/lian895615/article/details/78680541

<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           *{
               margin: 0 auto;
               padding: 0;
           }
           body{
               background: url(img/h.jpg);
           }
           .main{
               width: 800px;
               height: 800px;
           }
           .text{
               width: 300px;
               height: 40px;
           }
           .button{
               width: 80px;
               height: 40px;
           }
           .div1 img{
               width: 100px;
               height: 100px;
           }
           .div2 img{
               width: 100px;
               height: 100px;
           }
           .img3:hover{
               transform: skew(-50deg);
           }
           .img7:hover{
               transform: scale(1.5);
           }
       .img{
           width: 80px;
           height: 40px;
           animation: run 2s linear;
       }
       @keyframes run{
                   0%{
                   transform:rotate(0deg)
               }50%{
                   transform:rotate(180deg)
               }100%{
                   transform:rotate(360deg)
               }
           }
           .img02{
           width: 80px;
           height: 40px;
           animation: run02 2s linear;
       }
       @keyframes run02{
                   0%{
                   transform:rotate(360deg)
               }50%{
                   transform:rotate(180deg)
               }100%{
                   transform:rotate(0deg)
               }
           }
       </style>

       <script type="text/javascript">
           function fun(){
           document.getElementById("img1").setAttribute("class","img");
           document.getElementById("img2").setAttribute("class","img");
           document.getElementById("img3").setAttribute("class","img");
           document.getElementById("img4").setAttribute("class","img");
           }
           function fnull(){
                  history.go(0)
               }
           function fun2(){
           document.getElementById("img5").setAttribute("class","img02");
           document.getElementById("img6").setAttribute("class","img02");
           document.getElementById("img7").setAttribute("class","img02");
           document.getElementById("img8").setAttribute("class","img02");
           }
           function fnull2(){
                  history.go(0)
               }
       </script>
   </head>
   <body>
       <div class="main">
           <div align="center" style="margin-top: 50px;">
               <input type="text" class="text"/>
               <input type="button" value="百度一下" class="button"/>
           </div>
           <div align="center" style="margin-top: 30px;" class="div1" >
               <img src="img/a.jpg" class="img1" id="img1" οnmοuseοver="fun()" οnmοuseοut="fnull()"/>
               <img src="img/b.jpg" class="img2" id="img2"/>
               <img src="img/c.jpg" class="img3" id="img3"/>
               <img src="img/d.jpg" class="img4" id="img4"/>
           </div>
           <div align="center" style="margin-top: 10px;" class="div2">
               <img src="img/e.jpg" class="img5" id="img5" οnmοuseοver="fun2()" οnmοuseοut="fnull2()"/>
               <img src="img/f.jpg" class="img6" id="img6"/>
               <img src="img/g.jpg" class="img7" id="img7"/>
               <img src="img/h.jpg" class="img8" id="img8"/>
           </div>
       </div>
   </body>
</html>