html - 在圆形上展开背景

Question

我正在尝试做一个从中心扩展颜色的圆圈，我希望它以 border-radius: 50% 扩展它，如果你看了这个例子你就会明白我在说什么我做了

Checkout the sample i made for better understanding

感谢您的帮助

Answer 1

您可以在插入的box-shadow 上运行transition，就像这样

div {
  width: 300px;
  height: 300px;
  display: flex;
  color: #FFF;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #03BF60;
  cursor: pointer;
  transition: box-shadow .75s 0s, color .5s 0s;
  box-shadow: inset 0 0 0 0 #DCEDC8;
}

div p { 
  color: inherit;
  text-align: center;
}

div:hover {
  color: #444;
  box-shadow: inset 0 0 0 150px #DCEDC8;
}

<div>
  <p>
     Responsive design. I get this certificate by 
     learning HTML, CSS, web design, media query plus 
     animations using keyframes, declaring variables 
     on css and a lot of CSS components.
  </p>
</div>