用纯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网格的三个新特性详解
Apr 04 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 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
javascript,php获取函数参数对象的代码
2011/02/03 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
详解webpack2+React 实例demo
2017/09/11 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
element-ui点击查看大图的方法示例
2020/12/14 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python使用super()出现错误解决办法
2017/08/14 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
Python笔记之工厂模式
2019/11/20 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
办公室文员工作自我评价
2013/12/01 职场文书
大学生思想汇报范文
2013/12/31 职场文书
公益活动邀请函
2014/02/05 职场文书
演讲比赛主持词
2015/06/29 职场文书
python turtle绘图命令及案例
2021/11/23 Python