用纯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 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
php minixml详解
2008/07/19 PHP
PHP 读取和编写 XML
2014/11/19 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
jQuery中:last选择器用法实例
2014/12/30 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
JavaScript中的闭包
2016/02/24 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
如何使用angularJs
2017/05/08 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
python读写ini文件示例(python读写文件)
2014/03/25 Python
python在控制台输出进度条的方法
2015/06/20 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
大学生预备党员自我评价分享
2013/11/16 职场文书
乔迁之喜主持词
2014/03/27 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
单位工作证明
2014/10/07 职场文书
技术入股合作协议书
2014/10/07 职场文书
2014年护理部工作总结
2014/11/14 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书