点击，跳跃，翻转，重复，HTML代码在线实时编辑、预览

index.html

style.css

index.js

            
                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

            
            <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="./style.css">
</head>

<body>
<div class="content position-relative">    
    <button class="jump btn btn-warning btn-lg border border-4" onclick="javascript: this.classList.toggle('moveAndRotate');">
      <strong>
        点击 Me!
        
      </strong>
      
      <div class="position-absolute top-0 start-50 translate-middle" id="clickNotice" style="display: none;">
    </button>
      <div class="shadow position-absolute top-100 start-50 translate-middle"></div>
    
</div>
  <script src="./index.js"></script>
</body>

</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
41
42
43
44

            
            body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #6B3A9C;
    background: radial-gradient(at center, #6B3A9C, #B962BE);
    .content {
        height: 5rem;
        .jump {
            position: relative;
        }    
        .moveAndRotate {
                animation: moveAndRotate .5s 1;
        }
        .shadow {
            width: 140px;
            height: 20px;
            background-color: rgba(0, 0, 0, 0.3); 
            border-radius: 50%;
            position: absolute; 
            bottom: 40px;
            left: 50%; 
            transform: translateX(-50%); 
            filter: blur(5px); 
        }
    }
  
    
}
@keyframes moveAndRotate {
  0% {
    transform: translateY(0) rotate(0deg) scale(1.0);
  }
  50% {
    transform: translateY(-30px) rotate(0deg) scale(1.0);
  }
    75% {
        transform: translateY(-30px) rotate(720deg) scale(2.0);
    }
  100% {
    transform: translateY(0) rotate(720deg) scale(1.0); 
  }
}

            
                1
2
3
4
5

            
            console.log(["Hello 笔.COOL 控制台"])
;
console.log("This is a continuation of the code");

预览

控制台

清空