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

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

            
            <!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
    <title>Dia 27</title>
</head>
<body>
    <div class="pulse">
        <i class="fas fa-phone"></i>
    </div>    
</body>
</html>

</body>

CSS

格式化

            
                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

            
            body 
{
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #212121;
}
   
.pulse 
{
     width: 100px;
     height: 100px;
     background-color: #58ea00;
     color: white;
     border-radius: 50%;
     text-align: center;
     line-height: 100px;
     font-size: 48px;
     position: relative;
}
   
.pulse:before, .pulse:after 
{
     content: '';
     position: absolute;
     left: -20px;
     right: -20px;
     top: -20px;
     bottom: -20px;
     border: 1px solid #58ea00;
     border-radius: 50%;
     animation: pulse 1.5s linear infinite;
}
   
.pulse:after
{
     animation-delay: 0.5s;
}
   
@keyframes pulse 
{
     0% { transform: scale(0.5); opacity: 0 }
     50% { transform: scale(1); opacity: 1 }
     100% { transform: scale(1.2); opacity: 0 }
}

格式化

预览

控制台