源码：

<!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. ubuntu安装conda

    https://blog.csdn.net/menghuanbeike/article/details/79138651 你需要前往Anaconda的官网看下目前的下载地址: https://www. ...

  2. Git 基本操作(二)

    1. 分支操作 1.1 Fast-forward 当被合并分支(C4)位于合并分支(C2)的历史线上,此时的合并称为"fast-forward"; // hotfix 被合并到 m ...

  3. redis知识总汇

    redis基础 django-redis redis数据操作详解 redis持久化

  4. Python 面向对象 类 __str__

    class dog(object): def __init__(self,name): self.name = name d = dog('mike') print(d) # <__main__ ...

  5. python 类 __module__ __class__

    __module__ 和  __class__  __module__ 表示当前操作的对象在那个模块 __class__     表示当前操作的对象的类是什么 创建一个目录lib 在day7 目录下创 ...

  6. sshd:root@notty解决方法

    sshd:root@notty解决方法 [复制链接]--http://bbs.chinaunix.net/forum.php?mod=viewthread&tid=2050551 cat /e ...

  7. js判断display隐藏显示

    // 判断是否为隐藏(css)样式 function isHide(obj) {   var ret = obj.style.display === "none" || obj.s ...

  8. SimpleDateFormat实现String与Date之间的转换

    基本用法: java.text.SimpleDateFormat format=new SimpleDateFormat("yyyy-MM-dd"); java.util.Date ...

  9. 72. Edit Distance(编辑距离 动态规划)

    Given two words word1 and word2, find the minimum number of operations required to convert word1 to  ...

  10. JS事件监听手机屏幕触摸事件 Touch

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...