用纯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中Transform动画属性用法详解
Jul 04 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 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 模拟POST|GET操作实现代码
2010/07/20 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
通过DOM脚本去设置样式信息
2010/09/19 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
node使用request请求的方法
2019/12/20 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
python 文件与目录操作
2008/12/24 Python
如何搜索查找并解决Django相关的问题
2014/06/30 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
Python求离散序列导数的示例
2019/07/10 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
销售人员中英文自荐信
2013/09/22 职场文书
片区教研活动总结
2014/07/02 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server