如何编辑文本框的大小?

时间:2019-05-05 19:23:23

标签: javascript html css

我在编码方面遇到问题,不知道该怎么办。我想编辑图像上方的文字大小,但是我不知道该如何解决。现在它将在图像上输出其文本的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>

0 个答案:

没有答案