您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
小编给大家分享一下无需JS和jQuery代码如何实现CSS3鼠标浮动放大图片,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
无需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> <h5>左上角定位</h5> <div class="box"> <img src="dafu.jpg" class="zoom"> </div> <h5>居中定位</h5> <div class="box"> <div class="size"> <img src="dafu.jpg" class="zoom"><i class="middle"></i> </div> </div> </body>
看完了这篇文章,相信你对“无需JS和jQuery代码如何实现CSS3鼠标浮动放大图片”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。