css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

源码:

<!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>

时间: 2024-10-27 12:13:12

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

CSS3背景闪烁和图片缩放动画效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3感应鼠标的背景闪烁和图片缩放动态效

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

经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 <!DOCTYPE html> <html lang="en" class="no-

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="http://keleyi.com"> <title>实用CSS3的transform实现多种动画效果-柯乐义</title><base target="_blank" /> <s

ImageSwitcher实现显示图片(更改图片时有动画效果)

ImageView和ImageSwitcher都是用来显示图片的.只不过后者在更新显示的图片的时候可以有动画效果. 注意点: 1.ImageSwitcher初始化需要定义一个ViewFactory,该ViewFactory生成的对象必须为ImageView. iSwitcher.setFactory(new ViewFactory() { @Override public View makeView() { //创建一个ImageView对象 ImageView imageView = new

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

关于使用UIImageView显示一串图片组成动画效果的总结: 1>创建装这一串图片的容器,使用NSArray NSMutableArray *images = [NSMutableArray array]; 2>使用NSBudle类加载进来图片,然后每次加载进来一个图片就赋给一个UIImage对象,(注意:使用这个类加载进来的图片可以清除缓存,但是其他方法加载比如  UIImage *image = [UIImage imageNamed:fileName];方法加载的无法清除缓存.) NS

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

详细内容请点击 在线预览立即下载 html5+css3第一屏滚屏动画效果. 转载自:http://tympanus.net/codrops/2014/05/22/inspiration-for-article-intro-effects/ var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-7243260-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.

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

前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越来越多.今天这个分享是PC端的案例,因为我做的是大场景来的,起因还是我无意间看到一张卡通图片.于是我突发灵感,就趁热打铁使用CSS3动画把它按照自己的想法实现了出来.接下来,就让我们一起进入这个好玩的分享吧! 预览 学习一个案例要有热情,就应该先看一下案例的效果,所以,下图为我录的gif图片,大家先

css3 transition属性实现3d动画效果

transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少,现在我给大家介绍并实际实现下该属性. transition字面意思是变迁.变换.过度的意思,所以transition属性也离不开这个大致意思,其中该属性中的重要属性是: transition-property:指定过度的元素; 如:transition-property:background,就是指

图片墙动画效果

CSS3 transition实现超酷图片墙动画效果 <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3 transform初体验之demo5</title> <style type="text/css">