<!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. POSIX信号和自定义signal函数

    一.信号的概念 信号(signal)就是告知某个进程发生了某个事件的通知:信号通常是异步发生的,也就是说接受信号的进程不知道信号的准确 发生时刻:信号可以(1)由一个进程发给另一个进程:(2)由内核发 ...

  2. Linux centos6.7网卡配置

    系统安装完成后 以此执行以下命令 相当于自动获取IP地址 setup命令——Network configuration———Device configuration———eth0 依次保存退出 实际上 ...

  3. 微信小程序 后端用Flask实现

    手上有个微信小程序项目,因为对Python相对熟悉一些,打算后端用python写,具体采用python 轻量级的flask框架. 在做的过程中,有些问题需要考虑,记录在下边. 1. 开发的小程序后端怎 ...

  4. 【JS】空格分隔手机号

    '88888888888'.replace(/^(.{3})(.*)(.{4})$/, '$1 $2 $3')

  5. 单片机AT和STC区别

    http://www.21ic.com/jichuzhishi/datasheet/AT89C51/data/192017.html

  6. [kuangbin带你飞]专题一 简单搜索（回顾）

    A - 棋盘问题 POJ - 1321 注意条件:不能每放一个棋子,就标记一行和一列,我们直接枚举每一行就可以了. AC代码: #include<iostream> #include< ...

  7. Light oj 1021 - Painful Bases

    题意:  给一个B进制的数,一个10进制的数K,B进制数有x位, 对着x位进行全排列的话,有x!种可能, 问这x!的可能中,有多少种可以整除K,各个位置上的数字都不同. 思路:状态压缩,数位DP #i ...

  8. 机器学习超参数优化算法-Hyperband

    参考文献:Hyperband: Bandit-Based Configuration Evaluation for Hyperparameter Optimization I. 传统优化算法 机器学习 ...

  9. [Kubernetes]CentOS7下搭建Harbor仓库

    环境依赖: Harbor仓库需要环境:Python 2.7或以上版本,Docker 1.10或以上,Docker Compose 1.6.0或以上. CentOS7自带Python,所以不需要安装. ...

  10. 【转】浅析Python中的struct模块

    [转]浅析Python中的struct模块 最近在学习python网络编程这一块,在写简单的socket通信代码时,遇到了struct这个模块的使用,当时不太清楚这到底有和作用,后来查阅了相关资料大概 ...