单击时从中心填充圆形Div [英] Fill Circle-Shaped Div From Center with Color On Click

问题描述

我有一个圆形" div，其类别为"complete-button"(高度/宽度= 27px，边框半径= 12px).我想在单击时更改此div的背景颜色，从中心开始，以柔和的缓和向外扩展.

I have a "circular-shaped" div with class = "complete-button" (height/width =27px, border radius = 12px). I'd like to change the background color of this div on-click, starting from the center and expanding outwards with a gentle easing.

最有效的方法是什么?我已经看到一些帖子使用css on-hover(在选择器之前和之后使用)来完成此任务，但是我还不够聪明，无法将该想法转换为jQuery on-click.任何帮助将不胜感激！

What's the most efficient approach for doing this? I've seen some posts accomplishing this using css on-hover (using before and after selectors), but I'm not yet savvy enough to convert that idea to a jQuery on-click. Any help would be greatly appreciated!

推荐答案

使用此CSS:

div.button:after {
  content: '';                 /* needed for rendering */
  position: relative;          
  display: block;              /* so we can set width and height */
  border-radius: 50%;
  height: 0%;
  width: 0%;
  margin: auto;                /* center horizontally */
  background: red;
  top: 50%;                    /* center vertically */
  transform: translateY(-50%); /* center vertically */
  transition: 1s;
}

div.button.selected:after {
  height: 100%;
  width: 100%;
}

然后在点击时切换selected类.

代码段

$('div').click(function() {
  $(this).toggleClass('selected');
});

div.button {
  height: 27px;
  width: 27px;
  border-radius: 50%;
  background: green;
}

div.button:after {
  content: '';                 /* needed for rendering */
  position: relative;          
  display: block;              /* so we can set width and height */
  border-radius: 50%;
  height: 0%;
  width: 0%;
  margin: auto;                /* center horizontally */
  background: red;
  top: 50%;                    /* center vertically */
  transform: translateY(-50%); /* center vertically */
  transition: 1s;
}

div.button.selected:after {
  height: 100%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">

</div>

这篇关于单击时从中心填充圆形Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！