Question

我刚开始使用CSS动画，我想要发生的是一个从一端移动到另一端的圆圈。我把它设置为向右平移（当悬停时）到一定距离。

问题是，每当我改变浏览器的大小时，它都不会到达应该去的地方。相反，它一直持续到它再也看不见了。如何让它停在div的某一点？ CSS中是否有解决方案，或者在这种情况下是否需要Javascript或jQuery？先感谢您。

html, body, #wrapper{
    min-width: 1000px;
    min-height: 100%;
    margin: 0;
    padding: 0;
    }

#wrapper{
    position: relative;
    }

body{
    padding: 50px;
    background-color: #f9f1dc;
    }

.one{
    background-color: #ffeffd;
    padding: 15px;
    border-radius: 50px;
    width: auto;
    }

.ball{
    display: inline-block;
    height: 100%;
    width: 100%;
    border-color: none;
    border-radius: 100%;
    background-color: #662a48;
    transition: transform 500ms ease-in-out; 
    }

.stay{
    height: 150px;
    width: 150px;
    border-radius: 150px;
    }

.stay:hover .ball{
    transform: translateX(770%);
    }

<!DOCTYPE html>
    <html>
    
        <head>
            <link href="css/ball-animation.css" rel="stylesheet" type="text/css">
        </head>
        
        <body>
            <div class="one">
                <div id="wrapper">
                    <div class="stay">
                        <div class="ball"></div>
                    </div>
                </div>
            </div>
        </body>
    
    </html>

Answer 1

你必须在动画中使用vw单位而不是＆＃34;％＆＃34; 您必须做的唯一修复是适合容器的宽度和动画。我尝试使用此设置，但它可以是不同的

＆＃13;

html, body, #wrapper{
    width:80vw;
    min-height: 100%;
    margin: 0;
    padding: 0;
    }

#wrapper{
    position: relative;
    }

body{
    padding: 50px;
    background-color: #f9f1dc;
    }

.one{
    background-color: #ffeffd;
    padding: 15px;
    border-radius: 50px;
    width: auto;
    }

.ball{
    display: inline-block;
    height: 100%;
    width: 100%;
    border-color: none;
    border-radius: 100%;
    background-color: #662a48;
    transition: transform 500ms ease-in-out; 
    }

.stay{
    height: 150px;
    width: 150px;
    border-radius: 150px;
    }

.stay:hover .ball{
    transform: translateX(50vw);
    }

＆＃13;

<!DOCTYPE html>
    <html>
    
        <head>
            <link href="css/ball-animation.css" rel="stylesheet" type="text/css">
        </head>
        
        <body>
            <div class="one">
                <div id="wrapper">
                    <div class="stay">
                        <div class="ball"></div>
                    </div>
                </div>
            </div>
        </body>
    
    </html>

＆＃13;

Answer 2

在理解了所提供的答案后，这是最终输出。

html, body, #wrapper{
  min-width: 1000px;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

#wrapper{
  position: relative;
  height: 150px;
}

body{
  padding: 50px;
  background-color: #f9f1dc;
}

.one{
  background-color: #ffeffd;
  padding: 15px;
  border-radius: 50px;
  width: auto;
}

.ball {
  display: inline-block;
  height: 100%;
  width: 150px;
  border-color: none;
  border-radius: 100%;
  background-color: #662a48;
     position:absolute;
  left:0;
  transition: all 880ms ease-in-out; 
}

.stay {
  height:100%;
  width: 150px;
  border-radius: 150px;
 
}

.stay:hover .ball {
      left:100%;
      transform:translateX(-100%);
}

<!DOCTYPE html>
<html>

  <head>
    <link href="css/ball_anim.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div class="one">
      <div id="wrapper">
        <div class="stay">
          <div class="ball"></div>
        </div>
      </div>
    </div>
  </body>

</html>

CSS动画 - 在悬停时转换到某个点

2 个答案: