我有以下CSS和HTML动画代码：
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Animation/LipstickAd</title>
<link rel= "stylesheet" href = "style.css"></a>
</head>
<body>
<div id="logos" class = "main1">
<img src="moveable_part.png" height="750px" class="center"></img>
</div>
<div class="main">
<img id="lipstick_ad" src="lipstick_ad.png" height="750px" class="center"></img>
</div>
</body>
</html>
其中style.css具有：
#logos{
position: relative;
-webkit-animation: mymove 2s infinite;
}
@-webkit-keyframes mymove {
0%{
top:80px;
opacity:0%;
/* -webkit-animation-timing-function: ease-in; */
}
50%{
opacity:100%;
top:50px;
/* -webkit-animation-timing-function: ease-out; */
}
100%{
top:80px;
}
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.main1 {
position: fixed;
top: 80px;
right: -285px;
width: 200px;
height: 100px;
}
这在全屏模式下效果很好（我发现通过反复试验可以使用正确的px），但是一旦我调整了浏览器的大小，元素在main1中的位置（口红的顶部就会改变），并且看起来糟透了。
如何防止这种情况？
谢谢！
Metatag Viewport的目的是在网页上获得响应性，要防止在调整大小时默认响应性，只需将其删除即可。在HTML下方使用，或从代码中删除视口元行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Animation/LipstickAd</title>
<link rel= "stylesheet" href = "style.css"></a>
</head>
<body>
<div id="logos" class = "main1">
<img src="moveable_part.png" height="750px" class="center"></img>
</div>
<div class="main">
<img id="lipstick_ad" src="lipstick_ad.png" height="750px" class="center"></img>
</div>
</body>
</html>