css 如何使一个div同时在悬停时做缩放动画和平移动画

njthzxwz 于 2023-04-01 发布在其他

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

我有这个代码：https://codepen.io/sabeser/pen/BaOeBPW

:root {
  --scale--ratio: 1;
}

#wrapper {
  background-color: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
  width: 50vw;
}

.circle {
  background-color: red;
  width: 50px;
  height: 50px;
  border-radius: 20em;
  -webkit-animation: floataround 1.1s infinite alternate;
  animation: floataround 1.1s infinite alternate;
  transform: scale(var(--scale--ratio)) translate(0%, 0%);
  transform-origin: 0% 0%;
  transition: transform .9s;
  margin: 1em;
}

@keyframes floataround {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-8px);
  }
}

.circle:hover {
  cursor: pointer;
  background-color: green;
  --scale--ratio: 1.2;
}

<div id='wrapper'>
  <div class='circle'>

  </div>

  <div class='circle'>

  </div>
</div>

它显示了上下移动的两个圆圈：

然而，每个圆圈都应该在悬停时缩放。只有当我删除负责移动的代码时才能实现缩放：

-webkit-animation: floataround 1.1s infinite  alternate;
  animation: floataround 1.1s infinite  alternate;

我如何实现它？

css

来源：https://stackoverflow.com/questions/75884153/how-to-make-a-div-both-do-scale-animation-on-hover-and-translatey-animation-at-t

1条答案

按热度按时间

n6lpvg4x1#

您需要在@keyframes中保留scale()函数，否则您将完全覆盖transform属性：

@keyframes floataround {
  0% {
    transform: scale(var(--scale--ratio)) translateY(0);
  }

  100% {
    transform: scale(var(--scale--ratio)) translateY(-8px);
  }
}

如果你想在悬停时平滑地动画缩放效果，那么你必须使用单独的变换属性scale和translate，如下所示：
x一个一个一个一个x一个一个二个x
注意：单个转换属性是相当新的，可能不是所有设备都支持。但是，根据caniuse.com，这些天有近90%的用户设备支持它们。

赞(0）回复(0）举报 2023-04-01

我来回答

css 如何使一个div同时在悬停时做缩放动画和平移动画

1条答案

相关问题

热门标签

最新问答