时间戳

首页 > 解决方案 > JS/CSS：动画一个从另一个圆圈向外扩展的圆圈

javascript - JS/CSS：动画一个从另一个圆圈向外扩展的圆圈

问题描述

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

我试图让 div 具有 onmouseover 的功能，但是我不知道如何获得其余部分。我在考虑当 div 从较小的宽度和高度设置动画时，移动圆圈，但圆圈仍然会从中间扩展，而不是旧圆圈。

标签： javascripthtmlcss

解决方案

从纯 CSS 设置开始，然后看看你是否真的需要 Javascript。这通常总是响应更快/加载更快。但是，如果您已经在加载一个 JS 库并且它具有为此构建的函数（如 jQuery），那么请务必使用它们。有很多关于动画元素、CSS 或 JS 的教程。

随心所欲地玩弄数字和样式。

密码笔

#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>

推荐阅读