无需JS和jQuery代码实现CSS3鼠标浮动放大图片
author:一佰互联 2019-04-21   click:166

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