<!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. Mybatis中#{}和${}传参的区别及#和$的区别小结

    最近在用mybatis,之前用过ibatis,总体来说差不多,不过还是遇到了不少问题,再次记录下, 比如说用#{},和 ${}传参的区别, 使用#传入参数是,sql语句解析是会加上"&quo ...

  2. Oracle DbHelper

    wind8 系统选择项目时生成目标平台选择为X86 报错 “System.Exception”类型的未经处理的异常在 WindowsFormsApplication1.exe 中发生 其他信息: 尝试 ...

  3. Java SE之反射技术[Class,Field](一)

    一.什么是反射? 反射库(Reflection Library)提供了一个非常丰富且精心设计的工具集,以便编写能够动态操纵Java代码的程序.这项功能被大量地应用在JavaBeans中,它是Java组 ...

  4. PHPcms 缓存的读取和设置

    https://blog.csdn.net/huobobo124/article/details/76912632 1.PHPcms设置了保存和读取缓存的方法,其实现方法存储在PHPcms/lib/f ...

  5. python 装饰器前之闭包和装饰器

      装饰器: 一, 例如: # vim yue7.py def foo(): print ("fool-------------------") foo() 运行: [root@l ...

  6. Python转义字符&字符串运算符

    Python转义字符 在需要在字符中使用特殊字符时,python用反斜杠(\)转义字符.如下表: 转义字符 描述 \(在行尾时) 续行符 \\ 反斜杠符号 \' 单引号 \" 双引号 \a ...

  7. ionic编译安卓App

    安装node.js 安装Android Studio 运行Android Studio安装SDK,在D:\AndroidSDK 配置SDK环境 ANDROID_HOME=D:\AndroidSDK P ...

  8. Django中间件基础笔记

    django 中的中间件(middleware),在django中,中间件其实就是一个类,在请求到来和结束后,django会根据自己的规则在合适的时机执行中间件中相应的方法. 在django项目的se ...

  9. understand 安装笔记

    1. 下载64位 https://pan.baidu.com/s/1sJNSrG6n5Y0C1UFCZACYEA 或者去官网下载: https://scitools.com/download/arch ...

  10. Jetbrain系列软件配置文件同步

    https://intellij-support.jetbrains.com/hc/en-us/articles/206544519-Directories-used-by-the-IDE-to-st ...