【发布时间】：2025-12-23 21:40:12
【问题描述】：
这似乎是一个菜鸟问题，但我对 HTML 和 CSS 还是很陌生。
无论如何，我的问题是，在我的计算机上，我正在处理的网站在 100% 放大后看起来完全正常，正常。当我缩小时，我的“加载屏幕”上的图像会在屏幕上移动，当我放大时也是如此。
此外，在其他计算机上，图像位于“正在加载...”文本的左侧，而某些计算机将其位于文本的右侧。同样在移动设备上，背景和文本位于屏幕顶部，而图像位于屏幕中间的白色背景上。
可以在http://santatracking.net/loading.html查看网站页面
这是我的 HTML 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--<META HTTP-EQUIV="Refresh" CONTENT="1.5;URL=homevillage.html">-->
<script src="script.js"></script>
<link rel="stylesheet" href="loadingstyle.css">
<link rel="preload" href="styles.css">
<link rel="icon" type="favicon/png" href="http://santatracking.net/wp-content/uploads/2016/01/cropped-Team-yantsu-logo-transparent.png">
<title>SantaTrackingLive</title>
</head>
<body>
<div id="wrapper">
<div class="text">Loading<span>.</span><span>.</span><span>.</span></div>
<div id="loading">
<img class="image" src="loadingimg.png" alt="" width="200" height="200">
</div>
</div>
</body>
</html>
这是我的 CSS 代码
@font-face {
font-family: mo;
src: url(museo.ttf);
}
body {
font-family: mo;
background-image: url("bg.png");background-repeat: repeat;
background-size: cover;
}
.text {
position: absolute;
width: 300px;
height: 70px;
font-size: 30px;
margin: 426px 0 0 460px;
background: -webkit-linear-gradient(#ffffff, rgb(183,183,183));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
color: white;
}
#loading {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin: -90px 0 0 -100px;
-webkit-animation:spin 1.25s linear infinite;
-moz-animation:spin 1.25s linear infinite;
animation:spin 1.25s linear infinite;
outline: 1px solid transparent; -->
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
#wrapper {
height: auto;
width: 1200px;
margin: 0 auto;
}
@keyframes blink {
0% {
opacity: .2;
}
20% {
opacity: 1;
}
100% {
opacity: .2;
}
}
.text span {
background: -webkit-linear-gradient(#ffffff, rgb(183,183,183));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation-name: blink;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.text span:nth-child(2) {
animation-delay: .2s;
}
.text span:nth-child(3) {
animation-delay: .4s;
}
如果有人可以帮助我解决这个问题，那就太好了。再次为可能的菜鸟问题感到抱歉哈哈
再次感谢
【问题讨论】：