<!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. Win下安装nvm

    nvm 是 windows 下切换 node 版本的管理工具,mac 下可以使用 TJ 写的 n . 1.https://github.com/coreybutler/nvm-windows/rele ...

  2. 【转】Parcelable, Serializable，Cloneable，copyProperties

    Copying ... https://blog.csdn.net/max2005/article/details/78325036 存在着三件事,整理如下 Parcelable, Serializa ...

  3. Docker 操作记录

    Docker docker info 查看信息 docker 更改镜像目录 方式:1.配置文件修改 # cat /etc/sysconfig/docker |grep -v ^# |grep -v ^ ...

  4. 第28月第3天 c语言读写文件

    1. int ConfigIniFile::OpenFile( const char* szFileName ) { FILE *fp; size_t nLen; int nRet; CloseFil ...

  5. Elasticsearch 5.0 —— Head插件部署指南（Head目前支持5.0了！请不要看本篇文章了）

    使用ES的基本都会使用过head,但是版本升级到5.0后,head插件就不好使了.下面就看看如何在5.0中启动Head插件吧! Head目前支持5.0了!请不要看本篇文章了 Head目前支持5.0了! ...

  6. Java中常见的锁分类以及对应特点

    对于 Java 锁的分类没有严格意义的规则,我们常说的分类一般都是依据锁的特性.锁的设计.锁的状态等进行归纳整理的,所以常见的分类如下: 公平锁和非公平锁:公平锁是多线程按照锁申请的顺序获取锁,非公平 ...

  7. H - Rescue the Princess ZOJ - 4097 （tarjan缩点+倍增lca）

    题目链接: H - Rescue the Princess  ZOJ - 4097 学习链接: zoj4097 Rescue the Princess无向图缩点有重边+lca - lhc..._博客园 ...

  8. cxf方式实现webservice接口笔记

    1.配置cxf的jar包依赖: 因maven中央仓库会自带cxf的相关依赖jar,故去maven官网搜索并获取pom配置到本地pom.xml文件即可,maven中央仓库搜索引擎地址:http://se ...

  9. centOS7 tomcat 开机自启 自启动设置

    1.编写配置文件 // (1)修改tomcat.service vim /lib/systemd/system/tomcat.service // (2)复制以下代码,注意修改tomcat路径 [Un ...

  10. 解决安装YouCompleteMe与Vim版本不兼容问题

    用vim 7.4.4版本装YouCompleMe的时候提示这样的信息: YouCompleteMe unavailable: requires Vim 7.4.1578+.明明版本比它要求的还高,居然 ...