东莞嘉创网络致力于企业网站建设、网络推广!为客户创造价值!

东莞网络推广东莞网络推广 东莞网站建设东莞网站建设营销论坛营销论坛网站地图网站地图

当前位置:主页 > 知识库 > 网站设计 >

最简单的一个图片放大效果css样式表

发表日期:2020-05-11 18:07文章编辑:haofei浏览次数: 标签:    

最简单的一个图片放大效果css样式表:在鼠标在图片上方时,实现图片放大效果。参数可根据自己实际修改。
div img {
border: 0;
vertical-align: bottom;
max-width: 100%;
cursor: pointer;
transition: all 0.5s;
}

div img:hover {
transform: scale(1.1);
}

解析:
cursor:pointer设定鼠标的形状为一只伸出食指的手,这也是绝大多数浏览器里面鼠标停留在网页链接上方时候的样式。
transition: all 0.5s;宽高都是流畅转变的,时间为0.5s。
transform: scale(1.1):图片以1.1倍的倍率缩放。


相关文章

最简单的一个图片放大效果css样式表

日期:2020-05-11 浏览次数:61

discuz论坛出现错误Discuz! Database Error如何解决?

日期:2020-03-19 浏览次数:119

网页设计应该关注的64个关键点

日期:2019-12-30 浏览次数:122

 非法字符原因以及解决办法

日期:2019-09-26 浏览次数:120

HTTPS改造全流程常见Q&A

日期:2019-08-02 浏览次数:139

什么是ssl证书?有什么优势?如何选ssl证书?

日期:2019-07-30 浏览次数:119

四步轻松搞定网站页面设计

日期:2019-07-30 浏览次数:105

教你免费升级http到https,提升网站安全性

日期:2019-07-16 浏览次数:160

PHPstudy Apache停止无法启动的解决方案

日期:2019-07-13 浏览次数:204

百度分享不支持https的解决方案

日期:2019-07-13 浏览次数:107