HTML-----transform简单小游戏-CSDN博客

本文链接：https://blog.csdn.net/anzimaster/article/details/127391670

学校刚学的，简单搞个乐子

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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           *{
               background-color: black;
           }
           #door{
               position: absolute;
               top: 15%;
               left: 40%;
               /* border: solid black 3px; */
               width: 100.1px;
               height: 150.1px;
               transition: all 2s;
               visibility: inherit;
           }
           #door:hover{
               transform: rotateY(85deg);
               transform-origin: 0 center 0;
           }
           #door img{
               transition: all 1s;
           }
           #face{
               position: absolute;
               top: 15%;
               left: 40%;
               /* border: solid black 3px; */
               width: 100.1px;
               height: 150.1px;
               transition: all 2s;
               visibility: hidden;
               z-index: -1000;
               animation-timing-function: linear;
           }
           #face img{
               transition: all 1s;
           }
       </style>
   </head>
   <body>
       <div id="door">
           <img id="men" src="1/11/12/13/14/15/door.png" width="100px" height="150px" >
       </div>

       <div id="face">
       <img id="lian" src="2/21/22/23/24/25/face.png" width="100px" height="100px" >
       </div>

           <audio id="music" src="scram.mp3" loop="loop" autoplay="autoplay" >
           </audio>

       <script type="text/javascript">
           var a=document.getElementById("men");
           var b=document.getElementById("lian");
           var c=document.getElementById("face");
           var d=document.getElementById("music")
           a.οnclick=function(){
               a.style.width='300px';
               a.style.height="350px";
                   a.οnclick=function(){
                       a.style.width='450px';
                       a.style.height="500px";
                       a.οnclick=function(){
                           c.style.zIndex="100";
                           c.style.visibility="inherit";
                           d.play();
                           b.style.width="700px";
                           b.style.height="700px";

                       }

               }
           }
       </script>
   </body>
</html>