深圳市金黑网络技术有限公司始终坚持以用户需求为导向，提供安全、稳定、高效的产品和服务！
签到 · 搜索导航 · 服务热线 · 微信/手机：17817817816

深圳网站建设

搜索
应用资源 › 应用开发教程 › 前端教程 › html教程 › HTML5+css3 图片放大效果代码
返回列表 发新帖
查看: 972|回复: 0

HTML5+css3 图片放大效果代码

[复制链接]
admin

UID
1
贡献
844
金币
1540
主题
520
在线时间
333 小时
注册时间
2022-1-15
最后登录
2024-11-12
QQ
发表于 2022-1-21 13:55:28 | 972 | 0 | 显示全部楼层 |阅读模式
admin 2022-1-21 13:55:28 972 0 显示全部楼层
HTML5+css3 图片放大效果代码
HTML5代码如下：
  1. <div class="enlarge">
  2.     <img src="xx" alt="图片"/>
  3. </div>  
复制代码
第一种效果超出不隐藏：
  1. .enlarge{
  2.     width: 200px;
  3.     height: 200px;
  4.     border: 1px #ffffff solid;
  5. }
  6. .enlarge img{
  7.     width: 100%;
  8.     height: 100%;
  9.     cursor: pointer;
  10.     transition: all 0.6s;
  11.     -ms-transition: all 0.8s;
  12. }
  13. .enlarge img:hover{
  14.     transform: scale(1.2);
  15.     -ms-transform: scale(1.2);
  16. }
复制代码
第二种css3图片放大超出隐藏：
  1. .enlarge{
  2.     width: 200px;
  3.     height: 200px;
  4.     overflow: hidden;
  5.     border: 1px #ffffff solid;
  6. }
  7. .enlarge img{
  8.     width: 100%;
  9.     height: 100%;
  10.     cursor: pointer;
  11.     transition: all 0.6s;
  12.     -ms-transition: all 0.8s;
  13. }
  14. .enlarge img:hover{
  15.     transform: scale(1.2);
  16.     -ms-transform: scale(1.2);
  17. }
复制代码

css教程, css样式
楼主热帖

相关帖子
回复

举报

返回列表 发新帖
Copyright © 2013-2023 深圳市金黑网络技术有限公司 版权所有    备案号：粤ICP备2021124338号    粤公网安备 44030702003689号

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

快速回复 返回顶部 返回列表