用纯css3实现的图片放大镜特效效果非常不错


Posted in HTML / CSS onSeptember 02, 2014

今天要给大家分享的的一款用纯css3实现的图片放大镜特效。页面打开五个小图显示于页面。当鼠标经过图片时,当前图片以灰色背景图的形式展示。效果非常不错。
用纯css3实现的图片放大镜特效效果非常不错 

源码下载

实现的代码:

html代码:

复制代码
代码如下:

<ul class="gallery">
<li class="gallery__item"></li>
<li class="gallery__item"></li>
<li class="gallery__item"></li>
<li class="gallery__item"></li>
<li class="gallery__item"></li>
<li class="gallery__item"></li>
</ul>

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: '';
}
HTML / CSS 相关文章推荐
CSS3 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
css3.0 图形构成实例练习一
Mar 19 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 #HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 #HTML / CSS
css3中背景尺寸background-size详解
Sep 02 #HTML / CSS
css3中transition属性详解
Sep 02 #HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 #HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 #HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 #HTML / CSS
You might like
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
如何开发一个JQuery插件
2016/07/28 面试题
公司员工的自我评价范例
2013/11/01 职场文书
电子商务专业学生的自我鉴定
2013/11/28 职场文书
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
同学聚会欢迎辞
2014/01/14 职场文书
人事专员的职责
2014/02/26 职场文书
企业文化口号
2014/06/12 职场文书
消防志愿者活动方案
2014/08/23 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
2014年应急工作总结
2014/12/11 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
Python Socket编程详解
2021/04/25 Python