Question

我正试图让按钮移动。就像，当我点击一个按钮时，该按钮应随动画从一个地方移动到另一个地方。

这是我的代码：

<!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”时，按钮应该在左下角移动。

Answer 1

您可以通过多种方式实现这一目标。为了一个简单的解决方案，我使用了margin-left和一个简单的toggleClass

另一种选择可能是使用绝对定位或jquery动画。

＆＃13;

var _box = $('.box');

_box.on('click', function() {
  $(this).toggleClass('move');
});

＆＃13;

.box {
  display: block;
  width: 50px;
  height: 50px;
  background-color: blue;
  transition: 0.5s ease;
}

.box:hover {
  cursor: pointer;
}

.box.move {
  margin-left: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box"></div>

＆＃13;

Answer 2

＆＃13;

   function movebutton() {
        document.getElementById("button1").style.top = "400px";
        document.getElementById("button1").style.left = "30px";
    }

＆＃13;

button{
  position: absolute;
  top:30px;
  left:400px;
  transition: 0.5s linear;
}

＆＃13;

<html>
  <head>
    <title>Beat Surge</title>
  </head>
  <body>
    <button id = "button1" onclick="movebutton()">Remixes</button>
  </body>
</html>

＆＃13;

Answer 3

你真的应该在你的问题中提供更多信息，但是：如果我这样做，我会给按钮一个点击监听器函数，它添加了一个css类，然后使用css来处理元素放置。为动画使用css过渡。

document.querySelector('button').addEventListener('click', move);

function move(e) {
  e.target.classList.toggle('moved');
}

button {
  position: absolute;
  top: 40vh;
  left: 40vw;
  transition: all .2s;
}

.moved {
  top: 80vh;
  left: 4vw;
}

<button>Clicky</button>

将网页中的按钮移动到另一个网页

3 个答案: