介绍 & lt; div类=癱ontent"比;
& lt; ul>
& lt; li> & lt; img类=癮mplify"src=https://www.yisu.com/zixun/癷mg/1. jpg”title=胺糯?/>
<李> 
* {
保证金:0;
填充:0;
字体类型:“微软雅黑“;
}
ul李{
list-style:没有;
}
.content {
宽度:310 px;
身高:420 px;
填充:5 px;
边界:1 px固体# 000;
保证金:10 px汽车;
}/*定义容器的大小*/李.content ul {
显示:块;
宽度:300 px;
保证金:0汽车;
保证金:5 px;
溢出:隐藏;/*隐藏溢出*/边界:1 px固体# 000;
} .content ul李img {
显示:块;
边界:0;
宽度:100%;
变换:规模(1);
过渡:1缓解0;
-webkit-transform:规模(1);
-webkit-transform: 1缓解0;
} /*图片放大*/.content ul李:悬停.amplify {
变换:规模(1.3);
过渡:1缓解0;
-webkit-transform:规模(1.3);
-webkit-transform: 1缓解0;
}/*图片缩小*/.content ul李:悬停.narrow {
变换:规模(0.8);
过渡:1缓解0;
-webkit-transform:规模(0.8);
-webkit-transform: 1缓解0;
}
这篇文章主要介绍了CSS如何实现鼠标经过图片上图片等比缩放效果,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
代码解读
HTML部分的代码
定义图片的原始缩放比例变换:规模(1)。
图片缩放时的过度效果:转型:1缓解0;全部样式在1秒内缓动(逐渐变慢)的变化,除了缓解(默认值)之外过渡属性还有:线性(匀速),在:(加速),打发走:(减速),ease-in-out:(加速然后减速)
鼠标移动到图片时,图片的缩放效果:规模()里的值大于1,放大;规模()里的值小于1,缩小。
感谢你能够认真阅读完这篇文章,希望小编分享CSS如何实现鼠标经过图片上图片等比缩放效果内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!
