我刚刚开始使用 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>最佳答案
你必须在动画中使用 vw 单位而不是“%” 您必须做的唯一修复是适应容器的宽度和动画。我尝试使用此设置，但它可能会有所不同
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);
}<!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>关于html - CSS 动画 - 悬停时平移到某个点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38812331/