<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS3轮播图</title>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: cover;
opacity: 0;
animation: show 20s ease-out infinite;
}
@keyframes show{
0%{
opacity:0;
z-index:2;
}
5%{
opacity:1;
z-index: 1;
}
20%{
opacity:1;
z-index:1;
}
25%{
opacity:0;
z-index:0;
}
100%{
opacity:0;
z-index:0;
}
}
div:nth-child(1){
background-image: url(1.jpg);
animation-delay: -1s;
}
div:nth-child(2){
background-image: url(2.jpg);
animation-delay: 3s;
}
div:nth-child(3){
background-image: url(3.jpg);
animation-delay: 7s;
}
div:nth-child(4){
background-image: url(4.jpg);
animation-delay: 11s;
}
div:nth-child(5){
background-image: url(5.jpg);
animation-delay: 15s;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

纯CSS3轮播图的更多相关文章

  1. 纯css3 轮播图 利用keyframes

    效果: 关键点:利用keyframes 原理:infinite 注意点:在处理关键帧动画的时候,注意处理好 总共花费的 animation-duration:time  与每帧延延迟的时间的交错:要让 ...

  2. 纯js轮播图练习-1

    偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...

  3. 纯js轮播图练习-2，js+css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

  4. css 纯css轮播图 示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. 纯js轮播图练习-3，类似于淘宝海报带小圆点轮播图

    基于js和css,跟着网上的视频教程,结合自己想要的效果,做出了一个类似于淘宝海报的效果. 如图:淘宝首页 自己做的: 代码: <!DOCTYPE html> <html> & ...

  6. 纯js轮播图

    <div id="wrapper"> <div id="container"> <img src="http://ima ...

  7. 纯CSS3实现轮播图

    前言 纯css3实现的轮播图效果,和JavaScript控制的相比,简单高效了很多,但是功能也更加单一,只有轮播不能手动切换. 用什么实现的呢?页面布局 + animation动画 HTML部分 &l ...

  8. 纯CSS实现轮播图效果，你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

  9. css3 - 纯css实现一个轮播图

    这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...

随机推荐

  1. HTTP 响应类型 ContentType 对照表

    Ø  前言 1.   下面是 HTTP 响应类型 ContentType 的可选值,有备无患先保存一下.摘自:https://wiki.selfhtml.org/wiki/MIME-Type/%C3% ...

  2. IDAPython脚本之收集函数的调用信息

    转载:All Right 当我们要寻找软件漏洞 bug 的时候,或者做恶意代码分析的时候,首先会找一些常用的而且容易被错误使用的函数.但是有时候程序代码太多找的比较辛苦,并且费时间.所以我们可以写一个 ...

  3. “无法找到XXX.exe的调试信息，或调试信息不匹配”解决方案

    错误信息如下: 解决方法: 选择项目属性,依次序进行如下操作. 1.选择 配置属性->链接器->调试->生成调试信息 改为 是 一般问题都是出现在这个地方,修改完了可以尝试运行,若还 ...

  4. 用Nodejs连接MySQL

    转载,原地址:http://blog.fens.me/nodejs-mysql-intro/ 前言 MySQL是一款常用的开源数据库产品,通常也是免费数据库的首选.查了一下NPM列表,发现Nodejs ...

  5. Scala思维导图

  6. LR-Controller 如何自定义显示虚拟用户状态

    我们压测时,如何直观,实时地查看当前运行账号和迭代情况呢. 在运行脚本中添加一行代码就解决了~~~~~~~~~~~

  7. lua 语法的使用总结

    1.字符串连接 local tmp = "abc" local tmp1 = "ddd" tmp..tmp1 2. table 类型 就是关联数组 local ...

  8. JVM内存分配及GC流程

    -verbose 这是查询GC问题最常用的命令之一,具体参数如: -verbose:class 输出jvm载入类的相关信息,当jvm报告说找不到类或者类冲突时可此进行诊断. -verbose:gc 输 ...

  9. java.lang.RuntimeException: Cannot create a secure XMLInputFactory 异常处理

    背景:本人在近日的webservice   CXF接口的编写调试过程中,发现一个很奇怪的现象--我在本地对接口进行往返请求时完全没有问题,不管是main方法直接调用还是业务场景里调用都无问题,在其他同 ...

  10. Configuring Automatic Restart of an Oracle Database

    https://docs.oracle.com/cd/E11882_01/server.112/e25494/restart.htm#ADMIN12708