用纯CSS实现简单的相册幻灯片

之前发了两篇关于CSS的文章，大家都比较关注，看来大家对这块东西都是很感兴趣的，现在趁热打铁再来一发~~

简介

一个用纯CSS实现的简单幻灯片效果，仅供实验，要看Demo请自备Chrome浏览器，勿用于生产环境，不然后果自付，咩哈哈哈哈哈~~

Demo地址：http://output.jsbin.com/tewuso

效果图

效果图录出来很烂，不上传了，请看Demo :（

技术点

:target伪类
object-fit属性

原理说明

:target伪类可以指定当前锚点目标元素的样式，比如下面：

<a href="#image-1">查看图片</a>
<img id="image-1" src="xxx.jpg">

#image-1{display: none;
}
#image-1:target{display: block;
}

点一下"显示图片"，原本隐藏起来的#image-1就会突然冒出来，是不是很神奇？（噗→_→）

CSS中的object-fit属性在本Demo里面只是辅助作用，其作用是指定object类元素（img、video等）中的实际内容在元素中的填充方式，跟background-size: contain/cover有点点类似。
更具体的介绍请看张鑫旭的文章：半深入理解CSS3 object-position/object-fit属性

既然知道有:target这么个神奇的东西在，那我们完全可以用CSS实现“点一个小图显示一个大图”的效果，再把HTML写得溜~一点，实现上下图连续查看也是可以的。

代码

先上HTML部分，可以看到其实这种方式实现的幻灯片效果并不太灵活，每一个上下图按钮都要写出来，当然用程序生成此类代码也是很方便的~

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JS Bin</title>
</head>
<body><div class="container"><!--缩略图列表--><ul class="gallery-wrapper"><li><a href="#image-1"><img src="http://7rf38t.com1.z0.glb.clouddn.com/alarm%20politie.jpg"></a></li><li><a href="#image-2"><img src="http://7rf38t.com1.z0.glb.clouddn.com/flowers.jpg"></a></li><li><a href="#image-3"><img src="http://7rf38t.com1.z0.glb.clouddn.com/her%20camera.jpg"></a></li><li><a href="#image-4"><img src="http://7rf38t.com1.z0.glb.clouddn.com/little%20fox.jpg"></a></li><li><a href="#image-5"><img src="http://7rf38t.com1.z0.glb.clouddn.com/map.jpg"></a></li><li><a href="#image-6"><img src="http://7rf38t.com1.z0.glb.clouddn.com/ship.jpg"></a></li><li><a href="#image-7"><img src="http://7rf38t.com1.z0.glb.clouddn.com/snow%20mountain.jpg"></a></li><li><a href="#image-8"><img src="http://7rf38t.com1.z0.glb.clouddn.com/ship%20and%20shepherd.jpg"></a></li></ul><!--大图容器--><div class="hidden-images-wrapper"><div id="image-1"><img src="http://7rf38t.com1.z0.glb.clouddn.com/alarm%20politie.jpg"><a class="img-prev" href="#image-8">PREV</a><a class="img-next" href="#image-2">NEXT</a><a class="img-close" href="#"></a></div><div id="image-2"><img src="http://7rf38t.com1.z0.glb.clouddn.com/flowers.jpg"><a class="img-prev" href="#image-1">PREV</a><a class="img-next" href="#image-3">NEXT</a><a class="img-close" href="#"></a></div><div id="image-3"><img src="http://7rf38t.com1.z0.glb.clouddn.com/her%20camera.jpg"><a class="img-prev" href="#image-2">PREV</a><a class="img-next" href="#image-4">NEXT</a><a class="img-close" href="#"></a></div><div id="image-4"><img src="http://7rf38t.com1.z0.glb.clouddn.com/little%20fox.jpg"><a class="img-prev" href="#image-3">PREV</a><a class="img-next" href="#image-5">NEXT</a><a class="img-close" href="#"></a></div><div id="image-5"><img src="http://7rf38t.com1.z0.glb.clouddn.com/map.jpg"><a class="img-prev" href="#image-4">PREV</a><a class="img-next" href="#image-6">NEXT</a><a class="img-close" href="#"></a></div><div id="image-6"><img src="http://7rf38t.com1.z0.glb.clouddn.com/ship.jpg"><a class="img-prev" href="#image-5">PREV</a><a class="img-next" href="#image-7">NEXT</a><a class="img-close" href="#"></a></div><div id="image-7"><img src="http://7rf38t.com1.z0.glb.clouddn.com/snow%20mountain.jpg"><a class="img-prev" href="#image-6">PREV</a><a class="img-next" href="#image-8">NEXT</a><a class="img-close" href="#"></a></div><div id="image-8"><img src="http://7rf38t.com1.z0.glb.clouddn.com/ship%20and%20shepherd.jpg"><a class="img-prev" href="#image-7">PREV</a><a class="img-next" href="#image-1">NEXT</a><a class="img-close" href="#"></a></div></div></div>
</body>
</html>

CSS代码，很大部分都是用于定位啊布局什么的，另外还有相当一部分用于过渡动画效果，貌似有点影响性能~

html,body{height: 100%;margin: 0;padding: 0;overflow: hidden;background-color: #f0f0f0;
}.gallery-wrapper{display: block;list-style: none;width: 800px;height: 400px;margin: 60px auto 0 auto;padding: 10px;background-color: #fff;
}
.gallery-wrapper li{display: block;float: left;list-style: none;width: 180px;height: 180px;padding: 10px;
}
.gallery-wrapper a{display: block;width: 180px;height: 180px;overflow: hidden;
}
.gallery-wrapper img{display: block;width: 180px;height: 180px;object-fit: cover;background-color: #eee;transition: .5s;
}
.gallery-wrapper a:hover img{transform: scale(1.1);
}.hidden-images-wrapper > div{position: fixed;top: 0;right: 0;bottom: 0;left: 0;background-color: rgba(0,0,0,.8);opacity: 0;transition: .6s;pointer-events: none;
}
.hidden-images-wrapper > div:target{opacity: 1;pointer-events: auto;
}
.hidden-images-wrapper img{display: block;position: absolute;z-index: 3;top: 0;right: 0;bottom: 0;left: 0;width: 740px;height: 500px;max-width: 90%;max-height: 90%;margin: auto;padding: 30px;background-color: #fff;border-radius: 5px;object-fit: contain;transition: .7s;transform: translateY(-30px);
}
.hidden-images-wrapper div:target img{transform: translateY(0);
}
.img-prev,
.img-next{display: block;position: absolute;z-index: 4;top: 0;bottom: 0;height: 50px;margin: auto 0;padding: 0 20px;color: #333;font-size: 16px;line-height: 50px;text-decoration: none;background-color: #fff;
}
.img-prev:hover,
.img-next:hover{background-color: #eee;
}
.img-prev{left: 0;border-radius: 0 5px 5px 0;
}
.img-next{right: 0;border-radius: 5px 0 0 5px;
}
.img-close{position: absolute;z-index: 2;top: 0;right: 0;bottom: 0;left: 0;cursor: default;
}

就这些。。。
最后丢一个单个图片放大展示的效果：http://output.jsbin.com/goyeju/2，有性趣的同学可以自行研究原理，也很简单的

用纯CSS实现简单的相册幻灯片相关推荐

html5简单幻灯片图片转换,用纯CSS实现简单的相册幻灯片
之前发了两篇关于CSS的文章,大家都比较关注,看来大家对这块东西都是很感兴趣的,现在趁热打铁再来一发~~ 简介一个用纯CSS实现的简单幻灯片效果,仅供实验,要看Demo请自备Chrome浏览器,勿用 ...
纯CSS制作3D动态相册【流星雨3D旋转相册】HTML+CSS+JavaScriptHTML5七夕情人节表白网页制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
纯CSS实现3D立方体相册效果
<!doctype html> <html><head><meta charset="utf-8"><title>3D立 ...
纯CSS实现3D旋转相册特效
csdn下载地址 : https://download.csdn.net/download/began_in_the_heart/11643624 纯粹无聊分享,代码来源于网络,仅供学习交流..... ...
纯css 3D画廊旋转js特效
下载地址一个创造性的.自动旋转画廊,纯CSS代码实现的相册,通过图像旋转一个3d空间.旋转动画核心代码.rotator { position: absolute; left: 0; right: 0 ...
Java制作二级导航菜单_纯CSS实现超简单的二级下拉导航菜单代码
本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码.分享给大家供大家参考.具体如下: 这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且 ...
Php开源h5相册系统,HTML5 CSS3专题纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
纯css满屏图像幻灯片制作
天天写Linux有点烦,换个口味.今天说一下使用css制作满屏幻灯片,我是看的来自淘宝工程师在w3cplus写的文章:纯CSS3制作满屏图像幻灯片. 作者写的很好,也是我经常逛的博客,推荐给大家,可 ...
vue组件制作专题 - （mpvue专用）在mpvue中纯自己写css实现简单左右轮播
在mpvue中纯自己写css实现简单左右轮播 CSDN:jcLee95 邮箱:291148484@163.com 项目中,在src目录下的components目录下新建一个新文件并重命名为jcmv-c ...

用纯CSS实现简单的相册幻灯片

简介

效果图

技术点

原理说明

代码

用纯CSS实现简单的相册幻灯片相关推荐

最新文章

热门文章