Wie mache ich einen Hintergrund-Farbübergang, der schließlich div in die Mitte abdeckt?

Question

Da ich neu bei CSS-Übergang bin, möchte ich wissen, wie man einen solchen Hintergrund-Farbe-Übergang macht, der schließlich div zu seinem Zentrum abdeckt. Es ist wie aus allen Richtungen, oder von 2 oberen Ecken. Ich habe mal auf einer iOS App gesehen, ob ich das auf CSS kann.

Answer 1

Willkommen bei StackExchange!

Bitte geben Sie in Zukunft bitte ein Beispiel Ihres Codes, das Problem, und beschreiben Sie Ihre Versuche, es zu erreichen. Hat es sich unerwartet verhalten? Wie? Wo ist es schiefgelaufen?

Ja, das ist in CSS in vielerlei Hinsicht möglich. Hier ein paar Beispiele, die Sie 2 verschiedene Möglichkeiten zeigen, zu tun, was beschrieben wird:

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

-Code für diese:

.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 für diese:

.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; 
}