我正在尝试让按钮开始移动。比如，当我点击一个按钮时，该按钮应该随着动画从一个地方移动到另一个地方。
这是我的代码:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<style>
* @media screen and (max-width: 768px) {
}
@keyframes heading
{
from {top:350px;}
to {top:300px;}
}
@keyframes quote
{
from {top:290px}
to {top: 240px}
}
@keyframes button
{
from {opacity: 0}
to {opacity: 1}
}
@keyframes mvbut
{
from {top: 266px; right: 185px}
to {top: 250px; right: 170px;}
}
.button
{
background-color: white;
color: black;
padding: 16px 32px;
text-align: center;
font-size: 16px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1
{
background-color: white;
color: black;
border: 1px solid white;
position: relative;
top : 266px;
right: 185px;
border-radius: 30px 7px;
display:block;
margin: auto;
opacity: 0;
animation-name: button;
animation-duration: 0.5s;
animation-delay: 2s;
animation-fill-mode: forwards;
}
.button1:hover
{
background-color: black;
color: white;
}
.button3:click
{
animation-name: mvbut;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.button2
{
background-color: white;
color: black;
border: 1px solid white;
position: relative;
top : 210px;
left: 0px;
border-radius: 30px 7px;
display:block;
margin: auto;
opacity: 0;
animation-name: button;
animation-duration: 0.5s;
animation-delay: 2.3s;
animation-fill-mode: forwards;
}
.button2:hover
{
background-color: black;
color: white;
}
.button3
{
background-color: white;
color: black;
border: 1px solid white;
position: relative;
top : 154px;
left: 185px;
border-radius: 30px 7px;
display:block;
margin: auto;
height: auto;
opacity: 0;
animation-name: button;
animation-duration: 0.5s;
animation-delay: 2.6s;
animation-fill-mode: forwards;
}
.button3:hover
{
background-color: black;
color: white;
}
@font-face
{
font-family: beatsurge;
src: url(neutronium.ttf);
}
p.border
{
border-style: solid;
border-width: 2px;
padding: 20px;
position: absolute;
border-radius: 50px 20px;
position: absolute;
}
body
{
background-image: url("background.jpg");
background-repeat:no-repeat;
background-size: cover;
}
h1
{
color: white;
font-family: beatsurge;
font-size: 100px;
text-align: center;
top: 350px;
left: 0px;
position: relative;
animation-name: heading;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
p
{
font-size: 20px;
text-align: center;
color: white;
position: relative;
top: 290px;
left: 0px;
animation-name: quote;
animation-duration: 1s;
animation-delay: 1.25s;
animation-fill-mode: forwards;
}
</style>
<title>Beat Surge</title>
</head>
<body>
<div><h1><strong>BEAT SURGE</strong></h1></div>
<p>
Where words fail, music speaks.
</p>
<button class = "button button1">Remixes</button>
<button class = "button button2">Original Content</button>
<button class = "button button3">About Us</button>
</body>
</html>
例如，当我点击“Remixes”时，按钮应该移动到左下角。
最佳答案
function movebutton() {
document.getElementById("button1").style.top = "400px";
document.getElementById("button1").style.left = "30px";
}button{
position: absolute;
top:30px;
left:400px;
transition: 0.5s linear;
}<html>
<head>
<title>Beat Surge</title>
</head>
<body>
<button id = "button1" onclick="movebutton()">Remixes</button>
</body>
</html>关于javascript - 将网页中的按钮移动到另一个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49822483/