在圆形上扩展背景

Question

我正在尝试做一个从中心开始扩展-更改颜色的圆，并且我希望它使用边界半径扩展它：50％，如果您观看示例，您将了解我在说什么我做了

  

Checkout the sample i made for better understanding

感谢您的帮助

Answer 1

您可以像这样在transition上运行box-shadow

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>

Answer 2

您可以使用关键帧...

<div class="shape">
  <div class="to-animate animate"></div>
</div>

.shape {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.to-animate {
  width: 0;
  height: 0;
  background: blue;
}

.animate {
  animation: my-animation 1s forwards;
}

@keyframes my-animation {
  to {
    width:200px;
    height: 200px;
  }
}

https://jsfiddle.net/hernangiraldo89/ba3ne675/

关键帧是一个功能强大的工具，在此处提供其文档：

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes