<!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. 利用DNSLOG获取看不到的信息（给盲注带上眼镜）

    一.前言 本文原创作者:sucppVK,本文属i春秋原创奖励计划,未经许可禁止转载! 毕业设计总算搞得差不多了,这个心累啊.这不,完成了学校的任务,赶紧回来给蛋总交作业.今天给大家分享一个姿势吧,不是 ...

  2. C++ 类2

    继承: 联系一起的类有层次关系. 基类: 层次关系的根部 派生类: 基类负责定义在层次关系中所以类共同拥有的成员,派生类定义其各种特有的成员. 基类类型相关的函数, 派生类不做改变直接继承的函数 某些 ...

  3. 关于AJAX的基础操作

    AJAX开发 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 Java ...

  4. HttpClient 测试web API上传文件实例

    1.使用HttpClient 测试上传文件并且设置header信息: using Lemon.Common; using Newtonsoft.Json; using System; using Sy ...

  5. rabbitMQ学习3-RPC远程过程调用

    将一个函数运行在远程计算机上并且等待获取那里的结果,这个称作远程过程调用(Remote Procedure Call)或者 RPC. RPC是一个计算机通信协议. 比喻 将计算机服务运行理解为厨师做饭 ...

  6. MacOS英文版Google浏览器添加印象笔记剪藏插件

    1 切换到国内的Google应用商店安装 https://chrome.google.com/webstore/detail/evernote-web-clipper/pioclpoplcdbaefi ...

  7. RSA加解密-2

    Java使用RSA加密解密签名及校验   package com.ihep; import java.io.BufferedReader; import java.io.BufferedWriter; ...

  8. 3年java工作经验必备技能

    3年工作经验的Java程序员应该具备的技能 一.Java基础 1.String类为什么是final的. 2.HashMap的源码,实现原理,底层结构. 3.反射中,Class.forName和clas ...

  9. 读书笔记 Facebook在移动端都干了啥，居然让用户爱上广告

    文章来源:http://news.cnblogs.com/n/513297/ Facebook武器: Facebook 的武器只有一个:让广告主基于目标用户群投放个性化的精准广告.基于高质量的广告内容 ...

  10. 小程序开发-Step1

    先申请一个小程序 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据以上链接步骤一步一步来,认识字就可以完成,没什么特殊的 申请成功之 ...