现在有很多问题，我有点困惑
<!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>
#container {
width: 400px;
height: 400px;
position: relative;
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;
}
body {
margin-top: 15%;
background-image: url("space.gif");
background-repeat: no-repeat;
background-size: 100%;
}
.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;
text-size: 50px;
}
.rainbow-button:hover {
animation:slidebg 2s linear infinite;
}
@keyframes slidebg {
to {
background-position:20vw;
}
}
</style>
</head>
<center>
<body>
<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>
<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 <= 0) {
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>
</center>
</html>我希望移动的对象在上面的zindex中以第一个方向移动，然后在下面的zindex中以返回的方向移动，以创建一种类似于“轨道”的动画。下面是我想完成的一个例子（在相反的对角线上）：https://assets1.cbsnewsstatic.com/hub/i/2015/08/05/7a86d00b-3b24-497e-8cab-14ca3a735a46/dscovrepicmoontransitfull-small.gif
1条答案
按热度按时间nwnhqdif1#
你的解决方案在这里，实际上它不是用于z索引，它是因为#animate部分位置没有给出而发生的，我更新了它，并添加了一个虚拟div，以便现在z索引可以清楚地看到它正在工作。