两种css放大缩小图片的方法

<style>
.flex{height:100%;display:flex;justify-content:center;align-items:center}
img{height:250;width:250;}
@keyframes mymove
{
from {height:250;width:250;}
to {height:400;width:400;}
}
@keyframes back
{
from {height:400;width:400;}
to {height:250;width:250;}
}


</style>

<div class=flex>
	<img src=sj.jpg>
</div>
<script src=jq.js></script>
<script>
$("img").hover(function(){
    $(this).css({'animation':'mymove 0.5s','animation-fill-mode': 'forwards',
	'animation-timing-function':'ease'});
})
$("img").mouseout(function(){
    $(this).css({'animation':'back 0.5s','animation-fill-mode': 'forwards',
	'animation-timing-function':'ease'});
})

</script>  

<style>
.flex{height:100%;display:flex;justify-content:center;align-items:center}
img{transition: all 0.8s;height:250;width:250;}
img:hover{transform:scale(1.4);}
</style>

<div class=flex>
	<img src=sj.jpg>
</div>

可以看到，第二种方法比第一种简洁很多。