我在编码方面遇到问题,不知道该怎么办。我想编辑图像上方的文字大小,但是我不知道该如何解决。现在它将在图像上输出其文本的90%,我想更改该文本的大小。我该如何解决?
我需要添加额外的代码来解释我的问题吗?
我的完整代码链接:https://codepen.io/majed-h-alskaity/pen/BeaJvY
这是我的代码的一部分:
function getData () {
$.get('D:\Twitch\Twitch Alert\most_recent_subscriber.txt', function(data) {
var lines = data.split("\n");
return lines
});
}
@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy");
.wrapper {
position: absolute;
overflow: hidden;
width: 536px;
height: 195px;
right: 0;
}
#slide {
position: absolute;
right: -536px;
width: 536px;
height: 96px;
animation: slide 60s linear infinite;
}
#sub {
position: absolute;
top: -100px;
right: -420px;
width: 420px;
height: 96px;
animation: sub 60s linear infinite;
}
@keyframes slide {
0% {right:-536px}
3% {right:0px;}
12% {right:0px;}
15% {right:-536px}
100% {right:-536px}
}
@keyframes sub {
0% {right:-440px}
3% {right:-0px; top:60px;}
12% {right:-0px; top:60px;}
15% {right:-440px; top:0px;}
100% {right:-440px}
}
@keyframes sub {
0% {right:-420px}
3% {right:-20px; top:60px;}
12% {right:-20px; top:60px;}
15% {right:-420px; top:0px;}
100% {right:-420px}
}
.text_move {
opacity:0;
position: absolute;
color: #323232;
top: 95px;
text-align: center;
left: 250px;
font-size: 95px;
text-shadow: 1px 1px white;
animation: text 60s linear infinite;
}
@keyframes text {
0% {opacity:0;}
4% {opacity:0;}
7% {opacity:1;}
11% {opacity:1;}
12% {opacity:0;}
100% {opacity:0;}
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
</head>
<body onload="getname()">
<div class="wrapper">
<img id="sub" src="https://cdn.discordapp.com/attachments/572342724791894024/573217401840205825/Untitled-1.png" />
<img id="slide" src="https://cdn.discordapp.com/attachments/572342724791894024/573217407183618048/-.png" />
<div class="text_move" style="margin-left: 80px; font-size: 60px !important;">
<iframe id="frame" style="font-size: 60px !important;" src="../Twitch Alert/most_recent_subscriber.txt" frameborder="0" width="500px" height="120px"></iframe>
</div>
</div>
</body>
<script>
function getname() {
var get_frame = $("#frame").contents().filter("pre");
console.log(get_frame);
}
</script>
</html>