如何进行最终覆盖div到中心的背景颜色过渡？

Question

由于我是CSS过渡的新手，我想知道如何进行这样的背景颜色过渡，最终将div覆盖到其中心。它来自各个方向，或来自2个顶角。我在iOS应用程序上看过一次，我不知道它是否可以在CSS上使用。

Answer 1

Welcome to StackExchange!

Please, in the future, please provide an example of your code, the issue, and fully describe your attempts to achieve it. Did it behave unexpectedly? How? Where did it go wrong?

Yes, it is possible in CSS in many ways. Here's a couple examples showing you 2 different ways to do what is described:

http://codepen.io/anon/pen/XKzWaa

Code for this one:

.box{
position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  margin:auto;
  text-align:center;
  box-shadow:0 0 0 0 black inset;
  transition: 1s;
}

#clicker:checked ~ .box{
  box-shadow:0 0 1px 50vmin black inset;
  transition:0.5s;
}

---

http://codepen.io/anon/pen/qNVBVY

Code for this one:

.box .inner{
  height:100%;
  width:100%;
  z-index:2;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:0;
  background-color:black;
  transition:0.5s;
}


#clicker:checked ~ .box .inner{
  height:0%;
  width:0%;
  z-index:2;
  position:absolute;
  top:50%;
  left:50%;
  right:0;
  bottom:0;
  margin:0;
  background-color:black;
}