-
Notifications
You must be signed in to change notification settings - Fork 0
/
wcnts.html
96 lines (89 loc) · 3.14 KB
/
wcnts.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
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
<head>
<title>未成年提示</title>
<style>
/* 普通配色 */
.normal {
font-family: 'Arial Black', sans-serif;
font-size: 40px;
color: #100d0d;
text-shadow: 0 0 10px #ffffff;
}
/* 活泼字体+活泼配色 */
.lively {
font-family: 'Arial Black', sans-serif;
font-size: 50px;
color: #ff6f00;
text-shadow: 0 0 10px rgba(255, 111, 0, 0.5);
}
/* 可爱字体+马卡龙配色 */
.cute {
font-family: 'Arial Black', sans-serif;
font-size: 50px;
color: #ff80ed;
animation: glowing 2s infinite;
}
@keyframes glowing {
0% {
text-shadow: 0 0 10px rgba(255, 128, 237, 0);
}
50% {
text-shadow: 0 0 10px rgba(255, 128, 237, 0.5);
}
100% {
text-shadow: 0 0 10px rgba(255, 128, 237, 0);
}
}
/* 隐藏表单 */
.hidden {
display: none;
}
/* 文字样式 */
#output-text {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 20px;
background-color: transparent;
pointer-events: none;
}
</style>
</head>
<body>
<form id="text-form">
<p>注意:如果在OBS里直接用浏览器组件,<br>
1.可能会无法输入中文,解决方法是在外面输入然后复制进去.<br>
2.可能下拉框无法展开,可以用键盘上的上下键选择.</p>
<input type="text" id="text-input" placeholder="输入文字" value="未成年人请不要打赏捏!">
<select id="style-select">
<option value="normal">普通配色</option>
<option value="lively">活泼</option>
<option value="cute">可爱</option>
</select>
<input type="range" id="font-size-range" min="10" max="50" step="1" value="20">
<input type="range" id="opacity-range" min="0" max="1" step="0.1" value="1">
<button type="button" onclick="showText()">显示文字</button>
</form>
<p id="output-text" class="hidden"></p>
<script>
function showText() {
var inputText = document.getElementById("text-input").value;
var styleSelect = document.getElementById("style-select");
var fontSizeRange = document.getElementById("font-size-range");
var opacityRange = document.getElementById("opacity-range");
var outputText = document.getElementById("output-text");
var textForm = document.getElementById("text-form");
outputText.innerHTML = inputText;
outputText.className = styleSelect.value;
outputText.style.fontSize = fontSizeRange.value + "px";
outputText.style.opacity = opacityRange.value;
outputText.classList.remove("hidden");
textForm.classList.add("hidden");
}
</script>
</body>
</html>