英文:
Changing zIndex of a div while changing the position
问题
这段代码是一个HTML页面，它创建了一个简单的动画效果，其中一个对象在X和Y轴上来回移动，同时改变其z-index属性，以实现一种"环绕"效果。在这个效果中，物体在向前移动时z-index在上面，而在向后移动时z-index在下面，创建了一个"环绕"动画。
你提到的示例动画链接是一个月球经过太阳的动画，与这个示例代码有些不同，但你可以使用这个代码作为起点，根据你的需求进行修改和扩展，以实现类似的效果。
英文:
Here's the finished, working code if anyone else needs it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Orbit</title>
<style>
body {
margin-top: 15%;
background-image: url("space.gif");
background-repeat: no-repeat;
background-size: 100%;
}
#container {
width: 400px;
height: 400px;
background: green;
border-radius: 50%;
background-image: url("earth.png");
background-position: center;
background-repeat: no-repeat;
background-size: 160%;
z-index: 0;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: grey;
border-radius: 100%;
z-index: 2;
float: left;
}
#earth {
border-radius: 50%;
background-image: url("earth.png");
background-position: center;
background-repeat: no-repeat;
background-size: 160%;
float: left;
z-index: -1;
position: relative;
}
.rainbow-button {
width: calc(20vw + 6px);
height: calc(8vw + 6px);
max-width: 100px;
max-height: 50px;
background-image: linear-gradient(
90deg,
#00c0ff 0%,
#ffcf00 49%,
#fc4f4f 80%,
#00c0ff 100%
);
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.rainbow-button:hover {
animation: slidebg 2s linear infinite;
}
@keyframes slidebg {
to {
background-position: 20vw;
}
}
</style>
</head>
<body>
<center>
<div>
<p>
<button onclick="myMove()" class="rainbow-button" alt="Button">
Click Me
</button>
</p>
<p>
<button onclick="stop()" class="stop-button" alt="Button">
Stop
</button>
</p>
<!-- ignore this, it's not used -->
<div id="container">
<div id="animate" style="position: relative">
<img src="moon.png" style="max-width: 100%" />
</div>
</div>
</div>
<div id="earth"></div>
</center>
<script>
function myMove() {
const container = document.getElementById("container");
const box = document.getElementById("animate");
let t = setInterval(move, 1);
let pos = 1;
let test = true;
let zdex = "2";
function move() {
box.style.left = `${pos}px`;
box.style.top = `${pos}px`;
if (test) {
pos++; /* mov down */
} else {
pos--; /* move up */
}
/* update the direction when you reach the top or bottom limit*/
if (pos >= 350) {
test = false;
zdown();
} else if (pos <= -30) {
test = true;
zup();
}
}
function zdown() {
box.style.zIndex =
"-10"; /* trying to make it go under the container on the way back */
}
function zup() {
box.style.zIndex =
"2"; /* trying to make it go back to it's original position for the journey across */
}
}
</script>
</body>
</html>
I'm expecting for the object that is moving to go on the zindex above in the first direction then in the direction going back to go on the zindex below to create a kind of "orbiting" like animation.
Here is an example of what I'd like to accomplish (in the opposite diagonal): https://assets1.cbsnewsstatic.com/hub/i/2015/08/05/7a86d00b-3b24-497e-8cab-14ca3a735a46/dscovrepicmoontransitfull-small.gif
答案1
得分: 1
以下是翻译好的部分：
I Update My Solution As per Your Code Now You can able to show it's working properly .
（我根据您的代码更新了我的解决方案，现在您可以看到它正常工作。）
Your Solution is Here , actually it is not for z-index , it is occur because of the #animate section position is not given, I updated it and also add one dummy div so that now z-index is clearly visible it is working.
（您的解决方案在这里，实际上不是关于z-index，而是因为没有设置#animate部分的位置，我进行了更新，并添加了一个虚拟的div，以便现在z-index清晰可见，它正在工作。）
<style>
body {
margin-top: 15%;
background-image: url("space.gif");
background-repeat: no-repeat;
background-size: 100%;
}
#container {
width: 400px;
height: 400px;
background: green;
z-index: 0;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: grey;
border-radius: 100%;
z-index: 2;
}
#earth {
background: green;
border-radius: 50%;
background-image: url("earth.png");
background-position: center;
background-repeat: no-repeat;
background-size: 160%;
float: left;
z-index: -1;
position: relative;
}
.rainbow-button {
width: calc(20vw + 6px);
height: calc(8vw + 6px);
max-width: 100px;
max-height: 50px;
background-image: linear-gradient(
90deg,
#00c0ff 0%,
#ffcf00 49%,
#fc4f4f 80%,
#00c0ff 100%
);
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.rainbow-button:hover {
animation: slidebg 2s linear infinite;
}
@keyframes slidebg {
to {
background-position: 20vw;
}
}
</style>
评论