我将如何修复由于上面的元素动画而移动的元素

How would I fix elements moving due to an element animating above?

本文关键字：元素 动画 移动 何修复      更新时间：2023-09-26

我的网站出现错误。我似乎无法弄清楚为什么标题图像下方的 3 个按钮在移动，而第二个标题图片正在动画。我的目标是让标题下方的 3 个按钮在 title2 动画化时保持原样。动画是不断缩小/增长的，称为脉冲。这是我所有的代码，它很混乱，但这只是让我学习的。

<!DOCTYPE html>
<html>
<head>
<title>Test Website</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="scripts/snow.js"></script>
<style type="text/css">
body
{
background-color: black;
background-image: url("res/bg.png");
background-repeat: no-repeat;
}
div.button1
{
  width: 600px;
  position: static;
  height: 150px;
  margin: 30px 50px;
  background-image: url("res/button1.png");
  border: 1px solid #FF0030;
  border-radius: 55px;
  /*opacity:0.4;*/
  /*filter:alpha(opacity=40);*/
}
div.button2
{
  width: 600px;
  height: 150px;
  margin: 30px 50px;
  background-image: url("res/button2.png");
  border: 1px solid #00B7FF;
  border-radius: 55px;
  /*opacity:0.4;*/
  /*filter:alpha(opacity=40);*/
}
div.button3
{
  width: 600px;
  height: 150px;
  margin: 30px 50px;
  background-image: url("res/button3.png");
  border: 1px solid #00FFD5;
  border-radius: 55px;
  /*opacity:0.4;*/
  /*filter:alpha(opacity=40);*/
}
div.button1:hover
{
 transition: all 0.2s ease-in;
 -webkit-stroke-width: 5.3px;
 -webkit-stroke-color: #FFFFFF;
 -webkit-fill-color: #FFFFFF;
 box-shadow: 1px 0px 20px #000000;
 border: 2px solid #FF0030;
}
div.button2:hover
{
transition: all 0.2s ease-in;
 -webkit-stroke-width: 5.3px;
 -webkit-stroke-color: #FFFFFF;
 -webkit-fill-color: #FFFFFF;
 box-shadow: 1px 0px 20px #000000;
 border: 2px solid #00B7FF;
}
div.button3:hover
{
 transition: all 0.2s ease-in;
 -webkit-stroke-width: 5.3px;
 -webkit-stroke-color: #FFFFFF;
 -webkit-fill-color: #FFFFFF;
 box-shadow: 1px 0px 20px #000000;
 border: 2px solid #00FFD5;
}
#seventyfive{
    font-size:100px;
    font-weight:bold;
}
</style>
</head>
<body>
<center>
<img src="res/title.png"</img>
<img id="seventyfive"; src="res/title2.png"</img>
</br>
<div class="button1">
</div>
<div class="button2">
</div>
<div class="button3">
</div>
</center>
</body>
</html>
<script>
$(document).ready( function(){
        $.fn.snow({ minSize: 8, maxSize: 15, newOn: 390, flakeColor: '#C800FF' });
});
(function pulse(back) {
    $('#seventyfive').animate(
        {
            'font-size': (back) ? '100px' : '160px',
            height: (back) ? "60%" : "50%",
            width: (back) ? "60%" : "50%",
            
            
        }, 700, function(){pulse(!back)});
})(false);
</script>
感谢您阅读我的问题，我愿意接受任何答案/建议。谢谢大家！

垂直放置将基于项目上方任何内容的大小。因此，如果上面的项目是 100px，那么下面的按钮将位于 100px + 底部边距的位置。当该项目为 200px 时，下面的按钮将从 200px + 底部边距开始。

您想要的是图像标签周围的div，它不会改变大小。

<div style="width: 500px; height: 500px">
   <img id="seventyfive"; src="res/title2.png"</img>
</div>

PS，看看css动画与jquery。

尝试

#seventyfive{
    font-size:100px;
    font-weight:bold;
    position:absolute;
}

我没有对此做出任何承诺。试图先通过小提琴运行它，但脉搏不起作用。如果这不起作用，那么您也可以尝试.CSS

.seventyfive {
position:absolute;
}

.HTML

<div class="seventyfive">
<img src="res/title.png">
<img id="seventyfive"; src="res/title2.png">
</div>
相关文章：