幻灯片の纯CSS，NO JavaScript
之前就遇到有人问，不用js，纯css实现幻灯片。
那么对于使用纯的css + html 怎样来实现幻灯片呢？下面有几种方法可供参考，有些还不成熟。
方案一：利用css3的animation
例子传送门点我，点我！
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>幻灯片</title>
<style>
.ani {
width: 440px;
height: 440px;
margin: 50px auto;
overflow: hidden;
box-shadow: 0 0 5px rgba(0, 0, 0, 1);
background-size: cover;
background-position: center;
-webkit-animation-name: loops;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes loops {
0% {
background: url(../images/01.jpg) no-repeat;
}
25% {
background: url(../images/02.jpg) no-repeat;
}
50% {
background: url(../images/03.jpeg) no-repeat;
}
75% {
background: url(../images/04.jpg) no-repeat;
}
100% {
background: url(../images/05.jpg) no-repeat;
}
}
</style>
</head>
<body>
<div class="ani"></div>
</body>
</html>
方案二：把需要展示的图片集合并长一个长横图，然后再通过:hover伪类来改变图片的位置，从而达到幻灯片的效果
例子传送门还是点我吧
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrap {
width: 580px;
height: 440px;
background: #9ed2d9;
border: 5px solid #9ed2d9;
position: relative;
margin: 30px auto 20px auto;
-o-border-radius: 20px;
-icab-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
#slide {
padding: 370px 0 0 0;
margin: 0;
list-style: none;
width: 480px;
height: 30px;
overflow: hidden;
position: absolute;
left: 48px;
top: 29px;
}
#slide b {
float: left;
}
#slide span {
position: absolute;
left: 0;
top: 0;
height: 360px;
width: 480px;
border: 1px solid #698639;
border-color: #698639 #e0ebcb #e0ebcb #698639;
}
#slide b.overlay {
display: block;
width: 490px;
height: 370px;
background: transparent;
position: absolute;
top: -5px;
left: -5px;
}
#slide i {
display: block;
float: left;
margin-right: 5px;
width: 20px;
height: 20px;
color: #000;
line-height: 19px;
font-family: arial, sans-serif;
font-style: normal;
font-size: 11px;
text-align: center;
cursor: pointer;
}
#slide b img {
display: block;
border: 0;
position: absolute;
top: 0;
left: -1px;
-webkit-transition: all 0.7s ease-in-out;
}
#slide i:hover {
background-position: 0 -20px;
color: #fff;
}
#slide .p1:hover img {
left: -1px;
}
#slide .p2:hover img {
left: -481px;
}
#slide .p3:hover img {
left: -961px;
}
#slide .p4:hover img {
left: -1441px;
}
#slide .p5:hover img {
left: -1921px;
}
#slide .p6:hover img {
left: -2401px;
}
#slide .p7:hover img {
left: -2881px;
}
#slide .p8:hover img {
left: -3361px;
}
#slide .p9:hover img {
left: -3841px;
}
#slide .p10:hover img {
left: -4321px;
}
</style> </head>
<body>
<div id="wrap">
<div id="slide">
<b class="p1"><i>1</i>
<b class="p2"><i>2</i>
<b class="p3"><i>3</i>
<b class="p4"><i>4</i>
<b class="p5"><i>5</i>
<b class="p6"><i>6</i>
<b class="p7"><i>7</i>
<b class="p8"><i>8</i>
<b class="p9"><i>9</i>
<b class="p10"><i>10</i><span><img src="../images/long.jpg" alt="" /></span></b>
</b>
</b>
</b>
</b>
</b>
</b>
</b>
</b>
</b>
<b class="overlay"></b>
</div> <!-- end slide -->
</div> </body>
</html>
方案三：利用描点。通过点击描点来选择图片，达到幻灯片的效果。
我没有传送门，你们抢吧。
幻灯片の纯CSS，NO JavaScript的更多相关文章
- 使用基于关系的选择器和伪类选择器创建纯CSS无JavaScript的鼠标移动到上面即可显示的下拉菜单
html代码: <div class="menu-bar"> <ul> <li> <h3 class="text-warning ...
- 用纯css、JavaScript、jQuery简单的轮播图
完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为 img ...
- 纯css实现幻灯片效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- 纯css做幻灯片效果
css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...
- 纯CSS（无 JavaScript）实现的响应式图像显示
有许多方法可以实现web页面里图像的应答.然而,我碰到的所有方案都使用了JavaScript.这使我疑惑不用JavaScript实现图像响应是否可行. 我提出了下面纯CSS的方案. 它是如何工作的呢? ...
- 纯 CSS 实现幻灯片播放
介绍: 今日看到一道面试题,关于 使用纯CSS,不利用js, 写一个简单的幻灯效果页面.于是做了一个小demo,建议使用chrome,IE11查看~~ 主要思想: 利用 CSS3的 伪类选择器 : ...
- 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 利用animation和text-shadow纯CSS实现loading点点点的效果
经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...
- 用纯css改变下拉列表select框的默认样式（不兼容IE10以下）
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...
随机推荐
- Axis2 java调用.net webservice接口的问题（郑州就维）
这是一个古老的问题,古老到从我若干年前遇到这样的问题就是一个解决之道:反复尝试.其实标准是什么,标准就是一个束缚,一种按既定规则的束缚,错点点,你的调用就可能不成功,不成功后你要花费大量的力气查找原因 ...
- 面试准备--Spring（IoC）
Spring是为了解决企业应用开发的复杂性而创建的一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架. 1.IoC:控制反转(Inversion of Control)是一个重要的面向对象编 ...
- nginx 健康检查和负载均衡机制分析
nginx 是优秀的反向代理服务器,这里主要讲它的健康检查和负载均衡机制,以及这种机制带来的问题.所谓健康检查,就是当后端出现问题(具体什么叫出现问题,依赖 于具体实现,各个实现定义不一样),不再往这 ...
- Spring MVC Controller配置方式
第一种 URL对应Bean如果要使用此类配置方式,需要在XML中做如下样式配置 以上配置,访问/hello.do就会寻找ID为/hello.do的Bean,此类方式仅适用小型的应用系统 第二种 为UR ...
- NullableKey：解决Dictionary中键不能为null的问题 zt
2012-12-29 02:26 by 老赵, 1745 visits 众所周知,.NET中Dictionary的键不能为null,否则会抛出NullReferenceException,这在某些时候 ...
- POJ 1511 Invitation Cards dij
分析:正向加边,反向加边,然后两遍dij #include<cstdio> #include<cstring> #include<queue> #include&l ...
- HDU 4417 Super Mario 主席树
分析:找一个区间里小于等于h的数量,然后这个题先离散化一下,很简单 然后我写这个题主要是熟悉一下主席树,其实这个题完全可以离线做,很简单 但是学了主席树以后,我发现,在线做,一样简单,而且不需要思考 ...
- [Stephen]页面实现瀑布流源码
项目中使用到的瀑布流代码 @using tZ.Pms.Biz @using tZ.Mvc.Base @model IPageInfo @{ ViewBag.Title = Model.WebTitle ...
- bzoj 2707 [SDOI2012]走迷宫（SCC+高斯消元）
Description Morenan被困在了一个迷宫里.迷宫可以视为N个点M条边的有向图,其中Morenan处于起点S,迷宫的终点设为T.可惜的是,Morenan非常的脑小,他只会从一个点出发随机沿 ...
- 【Java基础】Integer包装类的缓冲池问题
首先看下面这个例子: public class TestNew { public static void main(String args[]){ Integer i1 = 10; //Integer ...