div - center를 결국 커버하는 배경색 전환을 만드는 방법은 무엇입니까?

Question

CSS 전환을 처음 접했을 때 div를 중심으로하는 배경색 전환을 만드는 방법을 알고 싶습니다. 모든 방향이나 2 개의 상단 모서리에서와 같습니다. 한 번 iOS 앱에서 보았는데, CSS에서 가능한지 모르겠습니다.

Answer 1

Welcome to StackExchange!

코드 예와 해당 코드의 예를 제공하고 시도를 완전히 작성하십시오. 예기치 않게 작동 했습니까? 방법? 어디서 잘못 되었습니까?

예, 여러 가지 방법으로 CSS에서 가능합니다. 이 하나

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

코드 :

.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

코드를이 하나 : 여기 당신에게 설명 일을 할 수있는 2 개 가지 방법을 보여주는 몇 가지 예입니다

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