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

前端  /  管理员 发布于 7年前   123

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


  • 上一条：
    深入理解css中position属性及z-index属性(推荐)
    下一条：
    CSS3实现文字波浪线效果示例代码

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客