未命名 FMwkyd，HTML代码在线实时编辑、实时预览

index.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

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <script src="./index.js"></script>
</head>

<body>
  <button class="fancy-button">将鼠标悬停在我上面！</button>

  <p>第一段话</br>aaaa</p>
  <p>第二段话</p>

  <div class="magical-quote">测试测试</div>

  <button class="bouncy-button">点击我！</button>

  <div class="my-element">管不管用</div>
</body>

</html>

编辑器加载中

style.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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

            
            .fancy-button {
background-color: blue;
color: white;
transition: all 0.3s ease;
}

.fancy-button:hover {
background-color: red;
color: yellow;
}

/* ::before在你的元素之后添加内容 */
.fancy-button::after {
content: "?";
margin-left: 5px;
}

/* ::before在你的元素之前添加内容 */
.fancy-button::before {
content: "?‍♂️ ";
}
/* 每个段落第一个字母 */
.fancy-button::first-letter {
font-size: 2em;
color: #8A2BE2;
float: left;
margin-right: 5px;
}
/* 第一行 */
p::first-line {
font-weight: bold;
color: #4B0082;
}
/* ::select选中文本时生效 */
::selection {
background-color: #FFD700;
color: #000000;
}
/* 这将在带有“magical-quote”类的元素前后添加引号 */
.magical-quote::before,
.magical-quote::after {
content: '"';
font-size: 2em;
color: #FF1493;
}

@page {
  size: A4;
  margin: 1cm;
  border: 1px;
}

@page :first {
margin-top: 2cm;
}


@keyframes 弹跳 {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}

.bouncy-button {
animation: 弹跳 1s 无限次;
}

@property --主颜色 {
语法: '<颜色>';
继承: false;
初始值: #ff0000;
}

.my-element {
  background-color: var(--主颜色);
  filter: brightness(150%)
}

编辑器加载中

index.js

            
                1

            
            console.log(["Hello 笔.COOL 控制台"])

编辑器加载中