躲猫猫，HTML代码在线实时编辑、实时预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

            
             <style>
    #maomao {
      position: fixed; 
      bottom: 40px; 
      right: -5px; 
      width: 57px; 
      height: 70px; 
      background-image: url(https://siitake.cn/src/mao.svg); 
      background-position: center; 
      background-size: cover; 
      background-repeat: no-repeat; 
      transition: background .3s;
    }
    #maomao:hover {
      background-position: 60px 50%;
    }
  </style>
</head>
<body>
  <div id="maomao" onMouseOut="duoMaomao()"></div>
  <script>
    var randomNum = function(minNum, maxNum) {
      switch(arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
        default:
          return 0;
      }
    }
    
    //躲猫猫的「猫猫」形象出自游戏「Don't catch Cats」(https://apps.apple.com/app/dont-catch-cats/id1375311035)。
    var duoMaomao = function() {
      var maomao = document.getElementById('maomao');
      maomao.style.bottom = randomNum(5, 80) + 'vh';
    }
  </script>
</body>
</html>