第二十一天，HTML/Vue代码在线实时编辑、预览

<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>dia 21</title> <link rel="stylesheet" href="style.css" type="text/css" > </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </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
45
46
47
48
49
50

            
            body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #262626;
}

ul {
    margin: 0;
    padding: 0;
    display: flex;
    border-bottom: solid 10px white;
}

ul li {
    list-style: none;
    width: 30px;
    height: 30px;
    background-color: white;
    margin: 0 10px;
    border-radius: 50%;
    animation: jumping 1s linear infinite;
}

@keyframes jumping {
    0% { transform: translateY(0); }
    50% { transform: translateY(-150px); }
    100% { transform: translateY(0); }
}

ul li:nth-child(1) {
    animation-delay: 0.45s;
}

ul li:nth-child(2) {
    animation-delay: 0.6s;
}

ul li:nth-child(3) {
    animation-delay: 0.3s;
}

ul li:nth-child(4) {
    animation-delay: 0;
}

ul li:nth-child(5) {
    animation-delay: 0.1s;
}