无需JS和jQuery代码实现CSS3鼠标浮动放大图片


Posted in HTML / CSS onNovember 21, 2016

无需JS和jQuery代码实现CSS3鼠标浮动放大图片

<html>
<head>
<title></title>
<style>
.box {
    /* 可见视觉区域 */
    width: 480px; height: 250px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.size {
    width: 1000px; height: 1000px;
    position: absolute; left: 50%; top: 50%;
    margin: -500px 0 0 -500px;
    /* 水平居中 */
    text-align: center;
}
.zoom {
    /* 缩放的元素 */
    width: 480px; height: 250px;
    vertical-align: middle;    
    -webkit-transition: -webkit-transform .2s;
    transition: transform .2s;
}
.box:hover .zoom {
    /* hover放大 */
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    zoom: 1.05;
}
:root .box:hover .zoom {
    zoom: 1;
}
.middle {
    /* 垂直居中 */
    display: inline-block;
    width: 0; height: 100%;
    vertical-align: middle;
}
</style>
</head>
<body>
<h4>左上角定位</h4>
<div class="box">
<img src="dafu.jpg" class="zoom">
</div>
<h4>居中定位</h4>
<div class="box">
    <div class="size">
        <img src="dafu.jpg" class="zoom"><i class="middle"></i>
    </div>
</div>
</body>

以上所述是小编给大家介绍的无需JS和jQuery代码实现CSS3鼠标浮动放大图片,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
纯CSS3实现质感细腻丝滑按钮
Mar 09 HTML / CSS
详解Css3新特性应用之过渡与动画
Jan 10 HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
Jun 27 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 HTML / CSS
CSS 圆形进度栏
Apr 06 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 #HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 #HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 #HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 #HTML / CSS
CSS3 box-sizing属性详解
Nov 15 #HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 #HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 #HTML / CSS
You might like
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
深入apache host的配置详解
2013/06/09 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
解决vue 引入子组件报错的问题
2018/09/06 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
Python处理CSV与List的转换方法
2018/04/19 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
使用Pycharm分段执行代码
2020/04/15 Python
keras 多gpu并行运行案例
2020/06/10 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
Hibernate持久层技术
2013/12/16 面试题
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
开学寄语大全
2014/04/08 职场文书
高中生操行评语
2014/04/25 职场文书
学习十八大的心得体会
2014/09/01 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
Apache POI的基本使用详解
2021/11/07 Servers