纯 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& ...
随机推荐
- 网页播放摄像头视频一种新的实现方式（非ocx方式）
前言 出于安全性考虑,浏览器对网页调用本地资源做了诸多限制.单纯的js是不能调用本地摄像头的,最常用的解决方案是通过ocx来实现.ocx是IE浏览器的扩展插件,并不是通用标准,很多浏览器并不支持ocx ...
- win8调出右侧菜单栏
1.快捷键:win+c 2.鼠标放在右下角1s
- STL中set和multiset小结
(1)使用set/multiset之前必须包含头文件<set>:#include<set> (2)namespace std{ template <cla ...
- 洛谷P1372 又是毕业季I+数学
P1372 又是毕业季I 题意:在1-n中找到k个数,使得这k个数的最大公因数最大: 思路,题解: 因为两个数成倍数关系时,它们的最大公因数是两数中的较小数,也就是相对来说最大公因数较大 返回题目,这 ...
- Atcoder D - 3N Numbers（优先队列+dp）
题目链接:http://abc062.contest.atcoder.jp/tasks/arc074_b 题意:给出3*n个数要求去掉n个数使得剩下的前n个数-后n个数的差最大. 题解:显然是一道如果 ...
- 51nod 1257 背包问题 V3（这不是背包问题是二分）
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1257 题解:不能按照单位价值贪心,不然连样例都过不了 要求的 ...
- codeforces 459 D. Pashmak and Parmida's problem（思维+线段树）
题目链接:http://codeforces.com/contest/459/problem/D 题意:给出数组a,定义f(l,r,x)为a[]的下标l到r之间,等于x的元素数.i和j符合f(1,i, ...
- SSM框架学习笔记（一）
Spring框架 Spring :是一个开源框架,起初是为解决企业应用开发的复杂性而创建的,但是现在已经不止 企业级应用开发,Spring的核心就是提供了一个轻量级的控制反转和面向切面编程. SPri ...
- FreeSql （十二）更新数据时指定列
var connstr = "Data Source=127.0.0.1;Port=3306;User ID=root;Password=root;" + "Initia ...
- （五）Linux内存管理zone_sizes_init
背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...