纯 CSS 实现幻灯片播放
介绍：
今日看到一道面试题，关于 使用纯CSS，不利用js， 写一个简单的幻灯效果页面。于是做了一个小demo，建议使用chrome,IE11查看~~
主要思想:
利用 CSS3的 伪类选择器 ：target ，更多内容可查看 MDN
原理介绍：
<a href="#image1">
<img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002aWIVK0qvVTB.jpg?max_age=2592000" alt="">
</a>
:target伪类可以指定当前锚点目标元素的样式
.hidden_gallery_wrapper img{
opacity:;
transition: all .7s;
transform: translateX(1000px);
}
.hidden_gallery_wrapper>div:target>img {
margin-top: 50vh;
opacity: 1.0;
transform: translate(0,-50%);
}
一些注意事项
- 里面使用linear-gradient 实现了一个小箭头图标，但是IE10以下版本不支持；并且IE支持background-repeat,但是不支持background-repeat-x|background-repeat-y;
- IE8及以下版本 不支持 figure,figcaption标签；可使用html5shim.js解决
给图片加超链接之后，会自带2像素边框(IE)img{border:none;}
Demo 的展示，戳 here
实现的Demo源代码如下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>纯CSS实现LightBox</title>
<link rel="stylesheet" href="lightbox.css">
</head> <body>
<div class="container">
<ul class="gallery_wrapper">
<li>
<a href="#image1">
<figure>
<img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002aWIVK0qvVTB.jpg?max_age=2592000" alt="">
<figcaption>图片说明</figcaption>
</figure>
</a>
</li>
<li>
<a href="#image2">
<figure><img src="https://y.gtimg.cn/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000" alt="">
<figcaption>图片说明</figcaption>
</figure>
</a>
</li>
<li>
<a href="#image3">
<figure>
<img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002aWIVK0qvVTB.jpg?max_age=2592000" alt="">
<figcaption>图片说明</figcaption>
</figure>
</a>
</li>
<li>
<a href="#image4">
<figure><img src="https://y.gtimg.cn/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000" alt="">
<figcaption>图片说明</figcaption>
</figure>
</a>
</li>
<li>
<a href="#image5">
<figure>
<img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002aWIVK0qvVTB.jpg?max_age=2592000" alt="">
<figcaption>图片说明</figcaption>
</figure>
</a>
</li>
<li>
<a href="#image6">
<figure><img src="https://y.gtimg.cn/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000" alt="">
<figcaption>图片说明</figcaption>
</figure>
</a>
</li>
</ul> </div>
<div class="hidden_gallery_wrapper">
<div id="image1">
<img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002aWIVK0qvVTB.jpg?max_age=2592000" alt="">
<a href="#image6" class="img_pre">Prev</a>
<a href="#image2" class="img_next">Next</a>
<a href="#" class="img_close"></a>
</div>
<div id="image2"><img src="https://y.gtimg.cn/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000" alt=""><a href="#image1" class="img_pre">Prev</a>
<a href="#image3" class="img_next">Next</a>
<a href="#" class="img_close"></a></div>
<div id="image3">
<img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002aWIVK0qvVTB.jpg?max_age=2592000" alt=""><a href="#image2" class="img_pre"></a>
<a href="#image4" class="img_next"></a>
<a href="#" class="img_close"></a></div>
<div id="image4"><img src="https://y.gtimg.cn/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000" alt=""><a href="#image3" class="img_pre">Prev</a>
<a href="#image5" class="img_next">Next</a>
<a href="#" class="img_close"></a></div>
<div id="image5">
<img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002aWIVK0qvVTB.jpg?max_age=2592000" alt=""><a href="#image4" class="img_pre">Prev</a>
<a href="#image6" class="img_next">Next</a>
<a href="#" class="img_close"></a></div>
<div id="image6"><img src="https://y.gtimg.cn/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000" alt=""><a href="#image5" class="img_pre">Prev</a>
<a href="#image1" class="img_next">Next</a>
<a href="#" class="img_close"></a></div>
</div>
</body> </html>
*{
margin:;
padding:;
}
html,body{
height: 100%;
font-size:16px;
background: #f0f0f0;
}
.container{
width: 90%;
position: relative;
margin:20px auto;
}
.gallery_wrapper{
list-style: none;
background: #fff;
padding-top: 20px;
text-align: center;
}
.gallery_wrapper li{
display: inline-block;
}
.gallery_wrapper figure{
margin: 10px;
width: 220px;
height: 300px;
overflow: hidden;
position: relative;
box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.36);
}
/*用来遮住图片放大的部分*/
.gallery_wrapper figure::after {
content: "";
border: 11px solid rgb(255, 255, 255);
position: absolute;
top: 0px;
left: 0px;
bottom: 69px;
right:;
}
.gallery_wrapper img{
width: 220px;
border:none;
height: 220px;
transition: all .5s;
}
.gallery_wrapper a:hover img{
transform:scale(1.1);
}
.gallery_wrapper figcaption{
margin-top:5px;
padding:5px;
color:grey;
}
.hidden_gallery_wrapper>div{
position: fixed;
top:;
right:;
bottom: 0px;
left:;
text-align: center;
background: rgba(0,0,0,.8);
display: none;
}
.hidden_gallery_wrapper>div:target{
display: block;
}
.hidden_gallery_wrapper img{
opacity:;
transition: all .7s;
transform: translateX(1000px);
}
.hidden_gallery_wrapper>div:target>img {
margin-top: 50vh;
opacity: 1.0;
transform: translate(0,-50%);
}
.hidden_gallery_wrapper .img_pre,.hidden_gallery_wrapper .img_next{
width: 65px;
z-index:;
position: absolute;
top: calc(50% - 15px);
border-radius: 5px;
height: 32px;
line-height: 32px;
text-decoration: none;
transition: all 1s;
color: rgb(255, 255, 255);
}
.hidden_gallery_wrapper .img_pre {
left: 30px;
text-indent: 13px;
background: linear-gradient(135deg,rgba(0, 0, 0, 0) 12.5px,rgba(158, 158, 158, 0.24) 0),linear-gradient(45deg,rgba(0, 0, 0, 0) 12.5px,rgba(158, 158, 158, 0.28) 0);
background-size: 100% 50%;
background-position: 0 0,0 100%;
background-repeat: no-repeat;
}
.hidden_gallery_wrapper .img_next {
right: 30px;
text-indent: -13px;
background:linear-gradient(-135deg,rgba(0, 0, 0, 0) 12.5px,rgba(158, 158, 158, 0.24) 0),linear-gradient(-45deg,rgba(0, 0, 0, 0) 12.5px,rgba(158, 158, 158, 0.28) 0);
background-size: 100% 50%;
background-position: 0 0,0 100%;
background-repeat: no-repeat;
}
.img_pre:hover{
background: linear-gradient(135deg,rgba(0, 0, 0, 0) 12.5px,rgba(158, 158, 158, 0.5) 0),linear-gradient(45deg,rgba(0, 0, 0, 0) 12.5px,rgba(158, 158, 158, 0.5) 0);
background-size: 100% 50%;
background-position: 0 0,0 100%;
background-repeat: no-repeat;
}
.img_next:hover{
background: linear-gradient(-135deg,rgba(0, 0, 0, 0) 12.5px,rgba(158, 158, 158, 0.5) 0),linear-gradient(-45deg,rgba(0, 0, 0, 0) 12.5px,rgba(158, 158, 158, 0.5) 0);
background-size: 100% 50%;
background-position: 0 0,0 100%;
background-repeat: no-repeat;
}
.img_close{
position: absolute;
z-index:;
top:;
right:;
bottom:;
left:;
cursor: default;
}
结束语：
实现原理还是比较简单的，大家可以自己看一下~ 其中，还利用了一点css3技巧，但是不是所有浏览器都兼容支持，所以建议使用chrome查看
纯 CSS 实现幻灯片播放的更多相关文章
- 纯css做幻灯片效果
css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...
- css实现幻灯片播放效果
用css实现幻灯片播放是最基础的,闲下来没事就试着写了一下,如果有不够完善或者方法不好的地方还请指点.下面我就用两种方法实现css花灯片效果. 方法1:定位.通过position属性改变left值 h ...
- 纯css实现幻灯片效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- 幻灯片の纯CSS，NO JavaScript
之前就遇到有人问,不用js,纯css实现幻灯片. 那么对于使用纯的css + html 怎样来实现幻灯片呢?下面有几种方法可供参考,有些还不成熟. 方案一:利用css3的animation 例子传送门 ...
- 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- marquee标签跑马灯连续无空白播放效果 纯CSS（chrome opera有效）
marquee似乎没有设置首尾相连播放的属性,内容滚动时总会留出一段marquee本身长度的空隙,某些情况下很不方便: 捣鼓了一会,得出一种解决办法,关键有两点: 1.将需要滚动的内容复制一份于同一行 ...
- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 纯CSS完成tab实现5种不同切换对应内容效果
很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- 利用target的特性，可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
随机推荐
- hdu-6579 Operation
题目链接 Operation Problem Description There is an integer sequence a of length n and there are two kind ...
- hdu6376 度度熊剪纸条 思维
度度熊剪纸条 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Subm ...
- hdu 5945 Fxx and game（dp+单调队列! bc#89)
Young theoretical computer scientist Fxx designed a game for his students. In each game, you will ge ...
- poj 1797Heavy Transportation（dijkstra变形）
题目链接:http://poj.org/problem?id=1797 题意:有n个城市,m条道路,在每条道路上有一个承载量,现在要求从1到n城市最大承载量,而最大承载量就是从城市1到城市n所有通路上 ...
- [USACO07OCT]障碍路线 & yzoj P1130 拐弯 题解
题意 给出n* n 的图,A为起点,B为终点,* 为障碍,.可以行走,问最少需要拐90度的弯多少次,无法到达输出-1. 解析 思路:构造N * M * 4个点,即将原图的每个点分裂成4个点.其中点(i ...
- [1]尝试用Unity3d制作一个王者荣耀(持续更新)->选择英雄-(上)
如果已经看过本章节:目录传送门:这是目录鸭~ 1.场景搭建: 首先我们去AssetStore逛淘宝~~~ 我淘到的是这个资源,其他好看的场景(消耗不高的都行). 然后我们导入了这个资源后,把资源根文件 ...
- 前端利器躬行记（5）——Git
Git是一款开源的分布式版本控制系统,它的出现和Linux紧密相关.Linux内核项目组为了能更好地管理和维护Linux内核开发,于2002年开始启用商业的分布式版本控制系统BitKeeper.虽然软 ...
- ScrollView内嵌ViewPager导致ViewPager滑动困难问题
转自:http://titanseason.iteye.com/blog/1858874 解决方式:重写ScrollView,然后在xml中定义布局的时候,使用自定义的PagerScrollView而 ...
- vim编辑器的使用详解
在Linux江湖,最常用到的编辑器非vim莫属,vim的功能很强大. 1. vim简介 在Linux世界中,最长用到的而且功能比较强大的是Vim编辑器.Vim编辑器是在内存缓冲区中处理数据. vi ...
- 解决chrome浏览器崩溃，再次安装不上问题
上网重新下载了个安装包,发现安装包都打不来 很绝望,查了很多资料 很多人说要删除注册表的东西 但是打开注册表,发现一堆google的东西,手动删根本不现实 在绝望中看到了解决方案:google Upd ...