Question

我试图让第一个圆圈可以在背景中用按钮扩展到第二个圆圈，有人知道怎么做？

Answer 1

动画处于按钮悬停状态

HTML

<div class="circle_b">
  <button class="circle_s">
      HOVER ME!
  </button>
</div>

CSS

.circle_b {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background: #ddd;
  position: relative;
}

.circle_s {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background: #ddd;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 0;
  background: coral;
  cursor: pointer;
  transition: all 0.2s ease;
}

.circle_s:hover {
  height: 200px;
  width: 200px;
  transition: all 0.2s ease;
}

Answer 2

一种方法是使用java脚本添加和删除包含圆圈属性的类。您可以创建一个包含一组属性的css类，然后在单击按钮时通过javascript调用这些属性。

.circle_b {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background: #ddd;
  position: relative;
}

.circle_s {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background: #ddd;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 0;
  background: coral;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sizePlus{
  height: 200px;
  width: 200px;
  transition: all 0.2s ease;
}


button{
  display: block;
  position: absolute;
  width: 200px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <script type="text/javascript">
  $(document).click(function (e) {
      $el = $(e.target);
     if ($el.hasClass('clickme')) {
          $(".circle_s").toggleClass('sizePlus');

      } else {
          $(".circle_s").removeClass('sizePlus');
      }
  });
  </script>
  <div class="circle_b">
    <button class="circle_s clickme">
    CLICK ME
    </button>
  </div>
</body>

如何使用按钮制作扩展圆圈

2 个答案: