<!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. sql leetcode -Duplicate Emails

    第一种解法: select distinct p1.Email as Email from Person p1, Person p2 where p1.Email=p2.Email and p1.Id ...

  2. Andrew NG 机器学习编程作业4 Octave

    问题描述:利用BP神经网络对识别阿拉伯数字(0-9) 训练数据集(training set)如下:一共有5000个训练实例(training instance),每个训练实例是一个400维特征的列向量 ...

  3. Redis + keepalived 高可用行配置检测脚本

    Redis 在生产配置中:除redis集群.哨兵模式之外:主从模式还是比较普遍的. 配置 redis 多主从:由 keepalived 做 VIP 地址漂移.可以实现redis的高可用性. keepa ...

  4. 关于mirai的一些研究

    关于mirai的一些研究 0x01.源码编译: 配置好对应的go开发环境,即可进行编译,生成了主要的文件 badbot为僵尸节点的可执行文件,cnc为主控端的可执行文件,其它一些为辅助工具. 如下图所 ...

  5. [C++]3-1 得分(Score ACM-ICPC Seoul 2005,UVa1585)

    Question 习题3-1 得分(Score ACM-ICPC Seoul 2005,UVa1585) 题目:给出一个由O和X组成的串(长度为1~80),统计得分. 每个O的分数为目前连续出现的O的 ...

  6. 第26月第25天 ubuntu openjdk-8-jdk jretty

    1.ubuntu ============== sudo apt-get install openjdk-8-jdk https://blog.csdn.net/zhaohaiyitian88/art ...

  7. 第25月第8天 100-Days-Of-ML-Code

    1.100-Days-Of-ML-Code https://github.com/Avik-Jain/100-Days-Of-ML-Code https://github.com/llSourcell ...

  8. 牛客寒假算法基础集训营4 G(最小生成树）

    题目链接 题目要求的是得到k种不同的元素,(题解)将每种类型视为一个点,跑一边克鲁斯卡尔即可. #include <set> #include <map> #include & ...

  9. sql-connectionStrings

    <connectionStrings> <add name="ClassReservatConnectionString" connectionString=&q ...

  10. 【NLP CS224N笔记】Lecture 3 GloVe： Global Vectors for Word Representation

    I. 复习word2vec的核心思路 1. Skip-gram 模型示意图: 2.word vectors的随机梯度 假设语料库中有这样一行句子: I love deep learning and N ...