纯 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 - 3416-Marriage Match IV (最大流 + 最短路)
HDU - 3416:http://acm.hdu.edu.cn/showproblem.php?pid=3416 参考:https://www.cnblogs.com/kuangbin/archiv ...
- codeforces 264 B. Good Sequences（dp+数学的一点思想）
题目链接:http://codeforces.com/problemset/problem/264/B 题意:给出一个严格递增的一串数字,求最长的相邻两个数的gcd不为1的序列长度 其实这题可以考虑一 ...
- git bash下添加忽略文件列表
转载自:https://blog.csdn.net/weixin_42808389/article/details/81232119 在用KEIL 5(MDK ARM)开发项目时需要用到GIT管理代码 ...
- adb logcat命令
1.http://blog.csdn.net/tumuzhuanjia/article/details/39555445 2.http://blog.csdn.net/xyz_lmn/article/ ...
- WPF 字体图标样式
1.在网上下载Font ICO 字体字体压缩包 Font Awesome 矢量图标库 2.下载到的压缩包,解压后获得图标字体文件 3.然后把字体文件夹拷贝到项目中,目录为(/fon ...
- 使用Elastic APM监控你的.NET Core应用
作者:Jax 前言 在应用实际的运维过程中,我们需要更多的日志和监控来让我们对自己的应用程序的运行状况有一个全方位的了解.然而对于大部分开发者而言,平时大家所关注的更多的是如何更优雅的实现业务,或者是 ...
- 【Offer】[45]【把数组排成最小的数】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如,输入数组{3,32,321},则打印出 ...
- H5实现扫描二维码功能
为了实现H5扫描二维码功能,我在网上找到了可用的代码:https://github.com/zhiqiang21/WebComponent/tree/master/html5-Qrcode 该程序能基 ...
- QRowTable表格控件(五)-重写表头排序、支持第三次单击恢复默认排序
目录 一.原生表格 二.效果展示 三.实现方式 1.排序列定制 2.排序交互修改 四.相关文章 原文链接:QRowTable表格控件(五)-重写表头排序.支持第三次单击恢复默认排序 一.原生表格 开发 ...
- Python学习之turtle库和蟒蛇绘制程序
Python的函数库 Python语言与C语言Java类似,可以大量使用外部函数库包含在安装包中的函数库:. 比如math, random, turtle等其他函数库,其他函数库用户根据代码需求自行安 ...