javascript 如何保持CSS转换动画与屏幕宽度成比例？

6l7fqoea 于 2023-11-15 发布在 Java

关注(0)|答案(1)|浏览(92)

考虑一下jsfiddle：https://jsfiddle.net/utzfbjed/
代码如下：

.image {
  margin: auto;
  -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}
.image:hover {
    -webkit-transform: translate(12em, 0);
    -moz-transform: translate(14em, 0);
    -o-transform: translate(14em, 0);
    -ms-transform: translate(14em, 0);
    transform: translate(14em, 0);
  }
.container {
  width: 50%;
  display: grid;
}
.a {
  aspect-ratio : 1 / 1;
  width: 100%;
  background-color: black;
  border-radius: 50%;
}

.container > * {
  grid-column-start: 1;
  grid-row-start: 1;
}

个字符
在黑色圆圈的中心有一个红色的小圆环，当悬停在圆环上时，它会向圆圈的右边缘移动。
我的问题是，当调整屏幕宽度：
1.如何确保动画后红色环始终出现在圆边缘的同一位置？
1.黑圈会随着屏幕宽度的变化而缩小。如何确保红圈与黑圈成比例？即黑圈越大，红圈越大，黑圈越小，红圈越小。
提前感谢！

JavaScript

来源：https://stackoverflow.com/questions/77482050/how-to-keep-the-css-transform-animation-proportional-to-the-screen-width

1条答案

按热度按时间

w1jd8yoj1#

为什么不在黑色圆圈内的环上使用position: absolute，然后相对于父环按比例调整大小和移动它？

.image {
  width: 50%;
  transition: 1s ease-in-out;
  position: absolute;
  ;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.a:hover .image {
  left: 100%
}

.container {
  width: 50%;
  display: grid;
}

.a {
  aspect-ratio: 1 / 1;
  width: 100%;
  background-color: black;
  border-radius: 50%;
  position: relative;
}

个字符

赞(0）回复(0）举报 2023-11-15

我来回答

javascript 如何保持CSS转换动画与屏幕宽度成比例？

1条答案

相关问题

热门标签

最新问答