纯 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& ...
随机推荐
- 洛谷 P1640 【连续攻击游戏】
question bank :luogu question Number :1640 title :Continuous attacking game link :https://www.luogu. ...
- HDU 6357 Hills And Valleys
Hills And Valleys 题意:给你一个序列, 可以翻转一次区间 [l, r] 求最大 非递减的 序列长度. 题解:枚举翻转区间,然后匹配. 如果不翻转区间, 那么就相当于用b[] = {0 ...
- 牛客练习赛17 B-好位置
传送门 题意:本来惯例中文题不解释的, 但是有些人不懂这个题意, 简单的来说, 就是s1每一个的每一个字符都可以和别的字符构成一个子串 == s2. 算了还是惯例中文题意不解释吧. 题解:其实以前写 ...
- 你知道@RequestMapping的name属性有什么用吗？【享学Spring MVC】
每篇一句 牛逼架构师:把复杂问题简单化,把简单问题搞没 菜逼架构师:把简单问题复杂化 前言 不知这个标题能否勾起你的好奇心和求知欲?在Spring MVC的使用中,若我说@RequestMapping ...
- 一文看尽Java-多线程概念
一.前言 主要讲解一下多线程中的一些概念,本文之后就开始针对JUC包的设计开始解读: 二.概念 线程安全 1.存在共享数据(临界资源):2.多个线程同时操作共享数据:只有同时出现这两种 ...
- 让docker中的mysql启动时自动执行sql
在用docker创建mysql容器的时,有时候我们期望容器启动后数据库和表已经自动建好,初始化数据也已自动录入,也就是说容器启动后我们就能直接连上容器中的数据库,使用其中的数据了. 其实mysql的官 ...
- Salesforce LWC学习(六) @salesforce & lightning/ui*Api Reference
上一篇中我们在demo中使用了很多的 @salesforce 以及 lightning/ui*Api的方法,但是很多没有细节的展开.其实LWC中针对这些module提供了很多好用的方法,下面对这两种进 ...
- Istio 1.3 发布，HTTP 遥测不再需要 Mixer
原文链接:Istio 1.3 发布,HTTP 遥测不再需要 Mixer Istio 是 Google.IBM 和 Lyft 联合开源的服务网格(Service Mesh)框架,旨在解决大量微服务的发现 ...
- 4.12号HTML、CSS
HTML 表单元素: 多行文本域<textarea> 标签定义多行的文本输入控件.文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier).可以通过 cols ...
- 手撸基于swoole 的分布式框架 实现分布式调用（20）讲
最近看的一个swoole的课程,前段时间被邀请的参与的这个课程 比较有特点跟一定的深度,swoole的实战教程一直也不多,结合swoole构建一个新型框架,最后讲解如何实现分布式RPC的调用. 内容听 ...