<<课外拓展>>向中心收缩的蓝天变红日

div {  
    width: 300px;  
    height: 200px;  
    background-color: #57a6f5;  
    margin: 20px auto;  
    -webkit-transition-property: width,height,border-radius,margin-top,background-color;  
    transition-property: width,height,border-radius,margin-top,background-color;  
    -webkit-transition-duration: 1s;  
    transition-duration: 1s;  
    -webkit-transition-timing-function: ease-out;  
    transition-timing-function: ease-out;  
    -webkit-transition-delay: .2s;  
    transition-delay: .2s;
}
div:hover {  
    width: 100px;  
    height: 100px;  
    border-radius: 50px;  
    margin-top: 70px;  
    background-color: red;
}