css scale 元素放大缩小效果

<style>
.trans-scale {
    width: 300px;
    height:300px;
    margin:100px auto;
    background:#99F;

    transition-function: ease-out;
    transition-duration: 1000ms;
    -webkit-transition-function: ease-out;
    -webkit-transition-duration: 1000ms;
    -moztransition-function: ease-out;
    -moztransition-duration: 1000ms;
    -o-transition-function: ease-out;
    -o-transition-duration: 1000ms;
}

.trans-scale:hover {
    transform: scale(1.25, 1.25);
    -webkit-transform: scale(1.25, 1.25);
    -moz-transform: scale(1.25, 1.25);
    -o-transform: scale(1.25, 1.25);
}
</style>

<div class="trans-scale"></div>

 

posted @ 2018-01-26 10:35  bubuchu  阅读(11093)  评论(0编辑  收藏  举报