Question

我想让一个圆从自身扩展，同时保持原来的圆。我想要的是当您将鼠标悬停在this page上的圆圈（例如水）上时（单击以开始查看圆圈）。我不确定该怎么做。请注意，我对jQuery的了解非常少，因此，如果您找到一种使用jQuery的方法，可以尝试保持简单吗？提前致谢。越早越好，因为这是针对学校项目的。

我试图使div具有onmouseover的功能，但是后来我不知道如何获得其余的功能。我当时在考虑div从较小的宽度和高度进行动画设置以移动圆，但是圆仍将从中间而不是旧圆开始扩展。

Answer 1

从仅CSS的设置开始，然后查看您是否真的需要Javascript。通常，这通常会更加敏感/加载速度更快。但是，如果您已经在加载JS库并且它具有为此功能构建的功能（如jQuery），则请务必使用它们。有很多关于动画元素CSS或JS的教程。

随意播放数字和样式。

Codepen

#container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 50%;
}

.circle:before {
 content: "";
 width: 200px;
 height: 200px;
 border-radius: 50%;
 position: absolute;
 z-index: -1;
 display: inline-block;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 transition: 0.5s ease-in-out;
}

.circle:hover:before {
  transform: scale(1.7) translate(-20%,-30%);
  background-color: pink;
}

<div id="container">
  <div class="circle red">&nbsp;</div>
</div>

JS / CSS：动画一个从另一个圆圈扩展出来的圆圈

1 个答案: