纯 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& ...
随机推荐
- 牛客Wannafly挑战赛13-BJxc军训-费马小定理、分式取模、快速幂
参考:https://blog.csdn.net/qq_40513946/article/details/79839320 传送门:https://www.nowcoder.com/acm/conte ...
- CF 13E Holes
Holes 题意:现在有一排洞,每个洞有一个弹力,能弹到ai之后的洞,球会弹到这个排的外面,现在有2个操作,0 a b 将第a个洞的弹力设为b, 1 a 将球放入第a个洞,求输出进洞的次数 和 弹出这 ...
- 牛客小白月赛4 B 博弈论 思维 字符串
链接:https://www.nowcoder.com/acm/contest/134/B来源:牛客网 题目描述 铁子和顺溜在学习了博弈论的sg函数之后,解决了很多很多博弈题,现在他们遇到了一道难题. ...
- yzoj P2350 逃离洞穴 题解
题意 跑两边spfa的水题,注意判断有人才取最大值 代码 #include<bits/stdc++.h> using namespace std; inline int read(){ i ...
- erlang加密模块crypto的一些使用
crypto 模块描述:该模块提供一系列加密函数: 散列函数-安全散列标准,MD5报文摘要算法(RFC 1321)和MD4报文摘要算法(RFC 1320); Hmac函数-散列消息认证(RFC 210 ...
- Python中字符编码及转码
python 字符编码及转码 python 默认编码 python 2.X 默认的字符编码是ASCII, 默认的文件编码也是ASCII python 3.X 默认的字符编码是unicode,默认的文件 ...
- [淘宝客技术篇008]（无需登录）淘宝天猫优惠券JSON接口1
今天,小星给大家分享的是一个非常重要,非常有意义的接口:获取淘宝天猫优惠券的JSON接口. 先上个链接: http://uland.taobao.com/cp/coupon_list?pid=mm_2 ...
- FreeSql （六）批量插入数据
var connstr = "Data Source=127.0.0.1;Port=3306;User ID=root;Password=root;" + "Initia ...
- laravel中利用循环实现隔行换色
1.首先在你的路由文件定义好访问的路径 2. <!doctype html><html lang="en"><head> <meta ch ...
- charles 反向代理
本文参考:charles 反向代理 这个比较有逼格了: 正向代理和反向代理的区别: 正向代理:是代理客户端,为客户端收发请求,使真实客户端对服务器不可见:在客户这一端的,替客户收发请求(类似现在正常使 ...