-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathplay.html
53 lines (49 loc) · 1.32 KB
/
play.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
51
52
53
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 在Codepen创建你的「CSS犯罪现场」 */
.box {
width: 100px;
height: 100px;
background:
linear-gradient(45deg, #ff6b6b 25%, transparent 25%) -50px 0,
linear-gradient(-45deg, #4ecdc4 25%, transparent 25%) -50px 0,
linear-gradient(45deg, transparent 75%, #ff6b6b 75%) -50px 0,
linear-gradient(-45deg, transparent 75%, #4ecdc4 75%) -50px 0;
background-size: 100px 100px;
transition: 0.5s;
}
.box:hover {
transform: rotate(360deg) scale(1.5);
background-position: 0 0;
}
:root { --x: 50%; --c: red; }
body::after {
content: "YOU ARE AWESOME";
position: fixed;
left: var(--x);
top: 50%;
color: var(--c);
font-size: 3em;
transform: translate(-50%, -50%);
mix-blend-mode: difference;
}
</style>
</head>
<body>
<div class="box"></div>
<p>你好</p>
<script>
// 在浏览器控制台运行这段代码
document.designMode = "on";
setInterval(() => {
document.body.style.setProperty('--x', Math.random() * 100 + '%');
document.body.style.setProperty('--c', `hsl(${Math.random()*360}, 70%, 50%)`);
}, 100);
</script>
</body>
</html>