一款用纯css3实现的图片放大镜特效。页面打开五个小图显示于页面。当鼠标经过图片时，当前图片以灰色背景图的形式展示，需要的朋友不要错过
今天要给大家分享的的一款用纯css3实现的图片放大镜特效。页面打开五个小图显示于页面。当鼠标经过图片时，当前图片以灰色背景图的形式展示。效果非常不错。 
实现的代码：
html代码：
登录后复制
css代码：
立即学习“前端免费学习笔记（深入）”；
.gallery { list-style: none; } .gallery:before, .gallery__item:last-child { position: fixed; top: 50%; left: 50%; margin: -31.25em; width: 62.5em; height: 62.5em; } .gallery:before { z-index: -1; border-radius: 50%; content: ''; box-shadow: inset 0 0 5em dimgrey, 0 0 0 50vw dimgrey; } .gallery__item { background-blend-mode: luminosity; transition: -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-image 0.5s; } .gallery__item:not(:last-child) { position: absolute; top: 50%; left: 50%; width: 32vmin; height: 32vmin; border-radius: 50%; box-shadow: 0 0 .5em white; } .gallery__item:nth-child(1) { margin: 13.87457vmin -4.53223vmin; -webkit-transform: scale(0.5); background: url("imgs/1.jpg") 50% 50% fixed whitesmoke; } .gallery__item:nth-child(1):hover { -webkit-transform: scale(1); background-blend-mode: normal; cursor: pointer; } .gallery__item:nth-child(1):hover ~ :last-child { background: url("imgs/1.jpg") 50% 50% fixed dimgray; } .gallery__item:nth-child(1):hover ~ :last-child:after { opacity: .001; } .gallery__item:nth-child(2) { margin: 4.13825vmin -40.86867vmin; -webkit-transform: scale(0.5); background: url("imgs/2.jpg") 50% 50% fixed whitesmoke; } .gallery__item:nth-child(2):hover { -webkit-transform: scale(1); background-blend-mode: normal; cursor: pointer; } .gallery__item:nth-child(2):hover ~ :last-child { background: url("imgs/2.jpg") 50% 50% fixed dimgray; } .gallery__item:nth-child(2):hover ~ :last-child:after { opacity: .001; } .gallery__item:nth-child(3) { margin: -33.42845vmin -42.83746vmin; -webkit-transform: scale(0.5); background: url("imgs/3.jpg") 50% 50% fixed whitesmoke; } .gallery__item:nth-child(3):hover { -webkit-transform: scale(1); background-blend-mode: normal; cursor: pointer; } .gallery__item:nth-child(3):hover ~ :last-child { background: url("imgs/3.jpg") 50% 50% fixed dimgray; } .gallery__item:nth-child(3):hover ~ :last-child:after { opacity: .001; } .gallery__item:nth-child(4) { margin: -46.90963vmin -7.71779vmin; -webkit-transform: scale(0.5); background: url("imgs/4.jpg") 50% 50% fixed whitesmoke; } .gallery__item:nth-child(4):hover { -webkit-transform: scale(1); background-blend-mode: normal; cursor: pointer; } .gallery__item:nth-child(4):hover ~ :last-child { background: url("imgs/4.jpg") 50% 50% fixed dimgray; } .gallery__item:nth-child(4):hover ~ :last-child:after { opacity: .001; } .gallery__item:nth-child(5) { margin: -17.67475vmin 15.95615vmin; -webkit-transform: scale(0.5); background: url("imgs/5.jpg") 50% 50% fixed whitesmoke; } .gallery__item:nth-child(5):hover { -webkit-transform: scale(1); background-blend-mode: normal; cursor: pointer; } .gallery__item:nth-child(5):hover ~ :last-child { background: url("imgs/5.jpg") 50% 50% fixed dimgray; } .gallery__item:nth-child(5):hover ~ :last-child:after { opacity: .001; } .gallery__item:last-child { z-index: -2; } .gallery__item:last-child:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .999; background: dimgrey; transition: opacity 2s; content: ''; }
登录后复制
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
关于CSS制作边框效果的一些技巧
兼容ie的内阴影和外阴影的实现效果及测试代码
CSS实现文字环绕图片的效果
以上就是CSS3实现的图片放大镜特效的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2895579.html
