方法一:js
Documentdiv {
width:0;
height:0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: 50% 50%;
background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg);
background-size:cover;
}
$(function() {
$(document).on('click',function(){
$('div').stop(true).animate({
width: 800,
height: 600
})
})
});
方法二:scale
Documentdiv {
width: 800px;
height: 600px;
margin: 100px auto 0;
transform: scale(0);
transform-origin: 50% 50%;
transition: transform .4s ease-in-out;
background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg);
background-size:cover;
}
$(function() {
$(document).on('click',function(){
$('div').css({
"transform": "scale(1)"
})
})
});
方法三:纯CSS
Document.outter {
width: 800px;
height: 600px;
margin: 100px auto 0;
background-color: gray;
}
.inner {
width: 800px;
height: 600px;
transform: scale(0);
transform-origin: 50% 50%;
transition: transform .4s ease-in-out;
background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg);
background-size:cover;
}
.outter:hover .inner {
transform: scale(1);
}