当前位置:首页 > 站长学院 > 建站教程 >

transition:鼠标放到图片上放大离开恢复使用方法

作者:齐鲁建站    发布时间:2020-08-31    阅读:
对于前端比较熟悉的朋友会了解,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使用方法的所有内容,只要保证上面的三个标红的代码放上去,就可以使用了,很简单吧。

QQ客服
QQ客服
陈经理