15621857753

transition:鼠标滑过图片放大离开恢复的CSS方法

来源:齐鲁CMS 栏目:html5 css3 jQuery 阅读: 日期:2020-08-31

对于前端DIV+CSS比较熟悉的朋友会了解,transition是一个可以使图片放大和恢复的小功能,对于图片型网站,会使得网站看起来很动感,体验好,那么transition使用方法是怎么样的,今天齐鲁建站小编就来说说的transition鼠标放到图片上放大离开恢复使用方法。

下面直接说transition使用方法。

HTML部分:

<div class="main">
    <img src="qilucms.png" alt="齐鲁建站" />
</div>

CSS部分:

.main{
width:100px;
height:100px;
overflow: hidden; 
}
.main img {
transition: all 0.6s; 
}
.main img:hover {
transform: scale(1.4); 
}

以上就是关于transition使用方法的所有内容,只要保证上面的三个标红的代码放上去,就可以使用了,很简单吧。