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

2024-07-11 09:07:33

字体：大中小

来源：转载

供稿：网友

<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鼠标浮动放大图片，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对VeVb武林网网站的支持！

注：相关教程知识阅读请移步到CSS教程频道。

上一篇：DIV 自动滚动功能及滚动条颜色修改的代码

下一篇：详解CSS中zoom属性或overflow:auto属性清除浮动的作用