源码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3伪放大镜(图片放大动画)效果</title>
<style>
.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 .5s cubic-bezier(0.175,0.885,0.32,1.275),background-image .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("images/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("images/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("images/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("images/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("images/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("images/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("images/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("images/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("images/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("images/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:''}
</style>
</head>
<body>
<!--代码部分begin-->
<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>
<div style="text-align: center;"></div>
<!--代码部分end-->
</body>
</html>

css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)的更多相关文章

  1. jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  2. 推荐9款使用CSS3实现的超酷动画效果

    大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...

  3. 实用CSS3的transform实现多种动画效果

    查看效果:http://keleyi.com/a/bjad/b6x9q8gs.htm 以下是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. ...

  4. jQuery演示10种不同的切换图片列表动画效果

    经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...

  5. html5+css3第一屏滚屏动画效果

    详细内容请点击 在线预览立即下载 html5+css3第一屏滚屏动画效果. 转载自:http://tympanus.net/codrops/2014/05/22/inspiration-for-art ...

  6. 【iOS开发】关于显示一连串图片组成动画效果UIImageView的使用

    关于使用UIImageView显示一串图片组成动画效果的总结: 1>创建装这一串图片的容器,使用NSArray NSMutableArray *images = [NSMutableArray ...

  7. JS框架_(JQuery.js)动画效果鼠标跟随

    百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...

  8. 纯CSS3制作卡通场景汽车动画效果

    前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...

  9. [web前端] css3 transition属性实现3d动画效果

    cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...

随机推荐

  1. java8新增的日期时间包

    Clock clock=Clock.systemUTC(); System.out.println("当前时刻为:"+clock.instant()); System.out.pr ...

  2. pta 习题集 5-15 数组循环左移

    本题要求实现一个对数组进行循环左移的简单函数:一个数组aa中存有nn(>0>0)个整数,在不允许使用另外数组的前提下,将每个整数循环向左移mm(≥0≥0)个位置,即将aa中的数据由(a0a ...

  3. Oracle卸载之正确卸载rac数据库的方法（MOS卸载方法）

    一.关闭数据库和资源 1.节点1 [root@node1 bin]# pwd /u01/app/11.2.0/grid/bin [root@node1 bin]# ./crsctl stop crs ...

  4. 阿里云 elastic search 重启 过程

    阿里云 es 重启 elasticsearch  重启 过程 实例变更中   53.13%   准备ECS资源 已完成节点数:4/4, 进度:100%     准备容器服务 进度:100%     变 ...

  5. 深究AngularJS——自定义服务详解(factory、service、provider)

    前言 3种创建自定义服务的方式.  Factory Service Provider 大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想.所以我们得了解下分 ...

  6. web应用/http协议/web框架

    一.web应用 Web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件.应用程序有两种模式C/S.B/S.C/S是客户端 ...

  7. Python开发【模块】：Requests（一）

    Requests模块 1.模块说明 Requests 是使用 Apache2 Licensed 许可证的 HTTP 库.用 Python 编写,真正的为人类着想. Python 标准库中的 urlli ...

  8. Python性能鸡汤(转)

    英文原文:http://blog.monitis.com/index.php/2012/02/13/python-performance-tips-part-1/ 英文原文:http://blog.m ...

  9. python 面向对象 __dict__

    打印 类或对象中的所有成员 类的构造函数属性 属于对象:类中的公有属性和方法等属于类 打印信息 class schoolMember(object): '''学校成员分类''' member = 0 ...

  10. 基因芯片与NGS区别[转载]

    转自:http://blog.sina.com.cn/s/blog_40d4ae110101fjzy.html 1 二代测序与基因芯片的区别与优缺点. 生物芯片相对第二代测序而言,优势在于价格便宜,便 ...