纯css3 轮播图利用keyframes

效果：

关键点：利用keyframes 原理：infinite

注意点：在处理关键帧动画的时候，注意处理好总共花费的 animation-duration：time 与每帧延延迟的时间的交错；要让动画显得层次感，处理好每帧的延迟时间；

多注意时间的穿插；效果更很好；下面只是我的小插图；画的不一定对;

以下是我的代码；有兴趣拷贝来看看，仅作为我的练习记录；关键帧要兼容其他浏览器，自行补充前缀即可；

下面附上源码；

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>纯css轮播图</title>

</head>

<body>

<style>

*{ margin:0 ; padding:0}

ul,li{ list-style:none; margin:0; padding:0;}

.box,

.box:after {

    position: fixed;

    width: 100%;

    height: 100%;

    top: 0px;

    left: 0px;

    z-index: 0;

}

.box:after {

    content: '';

    background: transparent url(../images/pattern.png) repeat top left;

}

.box li span {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0px;

    left: 0px;

    background-size: cover;

    background-position: 50% 50%;

    background-repeat: none; background-color:#333;

    opacity: 0;

    z-index: 0;

	-webkit-backface-visibility: hidden;

    -webkit-animation: imageAnimation 18s linear infinite 0s;

    -moz-animation: imageAnimation 18s linear infinite 0s;

    -o-animation: imageAnimation 18s linear infinite 0s;

    -ms-animation: imageAnimation 18s linear infinite 0s;

    animation: imageAnimation 18s linear infinite 0s;

}

.box li div {

    z-index: 1000;

    position: absolute;

    bottom: 30px;

    left: 0px;

    width: 100%;

    text-align: center;

    opacity: 0;

    -webkit-animation: titleAnimation 18s linear infinite 0s;

    -moz-animation: titleAnimation 18s linear infinite 0s;

    -o-animation: titleAnimation 18s linear infinite 0s;

    -ms-animation: titleAnimation 18s linear infinite 0s;

    animation: titleAnimation 18s linear infinite 0s;

}

.box li div h3 {

    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;

    font-size: 160px;

    padding: 0 30px;

    line-height: 120px;

    color: rgba(255,255,255,0.8);

}

.box li:nth-child(1) span { background-image: url(../images/love5.jpg) }

.box li:nth-child(2) span {

    background-image: url(../images/love3.jpg);

    -webkit-animation-delay: 6s;

    -moz-animation-delay: 6s;

    -o-animation-delay: 6s;

    -ms-animation-delay: 6s;

    animation-delay: 6s;

}

.box li:nth-child(3) span {

    background-image: url(../images/love1.jpg);

    -webkit-animation-delay: 12s;

    -moz-animation-delay: 12s;

    -o-animation-delay: 12s;

    -ms-animation-delay: 12s;

    animation-delay: 12s;

}

.box li:nth-child(2) div {

    -webkit-animation-delay: 6s;

    -moz-animation-delay: 6s;

    -o-animation-delay: 6s;

    -ms-animation-delay: 6s;

    animation-delay: 6s;

}

.box li:nth-child(3) div {

    -webkit-animation-delay: 12s;

    -moz-animation-delay: 12s;

    -o-animation-delay: 12s;

    -ms-animation-delay: 12s;

    animation-delay: 12s;

}

@-webkit-keyframes imageAnimation {

	0% {

	    opacity: 0;

	    -webkit-animation-timing-function: ease-in;

	}

	11% {

	    opacity: 1;

	    -webkit-transform: scale(1.05);

	    -webkit-animation-timing-function: ease-out;

	}

	30% {

	    opacity: 1;

	    -webkit-transform: scale(1.1);

	}

	35% {

		opacity: 0;

		-webkit-transform: scale(1.1) translateY(-20%);

	}

	49% {

		opacity: 0;

		-webkit-transform: scale(1.1) translateY(-60%);

	}

	100% { opacity: 0 ;  -webkit-transform: scale(1.1) translateY(-100%);}

}

@-moz-keyframes imageAnimation {

	0% {

	    opacity: 0;

	    -moz-animation-timing-function: ease-in;

	}

	11% {

	    opacity: 1;

	    -moz-transform: scale(1.05);

	    -moz-animation-timing-function: ease-out;

	}

	30% {

	    opacity: 1;

	    -moz-transform: scale(1.1);

	}

	35% {

		opacity: 0;

		-moz-transform: scale(1.1) translateY(-20%);

	}

	49% {

		opacity: 0;

		-moz-transform: scale(1.1) translateY(-60%);

	}

	100% { opacity: 0 ;  -moz-transform: scale(1.1) translateY(-100%);}

}

@keyframes imageAnimation {

	0% {

	    opacity: 0;

	    animation-timing-function: ease-in;

	}

	11% {

	    opacity: 1;

	    transform: scale(1.05);

	    animation-timing-function: ease-out;

	}

	30% {

	    opacity: 1;

	    transform: scale(1.1);

	}

	35% {

		opacity: 0;

		transform: scale(1.1) translateY(-20%);

	}

	49% {

		opacity: 0;

		transform: scale(1.1) translateY(-60%);

	}

	100% { opacity: 0 ;  transform: scale(1.1) translateY(-100%);}

}

@-webkit-keyframes titleAnimation {

	0% {

	    opacity: 0;

	    -webkit-transform: translateY(-300%);

	}

	8% {

	    opacity: 1;

	    -webkit-transform: translateY(0%);

	}

	22% {

	    opacity: 1;

	    -webkit-transform: translateY(0%);

	}

	28% {

	    opacity: 0;

	    -webkit-transform: translateY(100%);

	}

	35% { opacity: 0 }

	100% { opacity: 0 }

}

@-moz-keyframes titleAnimation {

	0% {

	    opacity: 0;

	    -moz-transform: translateY(-300%);

	}

	8% {

	    opacity: 1;

	    -moz-transform: translateY(0%);

	}

	22% {

	    opacity: 1;

	    -moz-transform: translateY(0%);

	}

	28% {

	    opacity: 0;

	    -moz-transform: translateY(100%);

	}

	35% { opacity: 0 }

	100% { opacity: 0 }

}

@keyframes titleAnimation {

	0% {

	    opacity: 0;

	    transform: translateY(-300%);

	}

	8% {

	    opacity: 1;

	    transform: translateY(0%);

	}

	22% {

	    opacity: 1;

	    transform: translateY(0%);

	}

	28% {

	    opacity: 0;

	    transform: translateY(100%);

	}

	35% { opacity: 0 }

	100% { opacity: 0 }

}

/* Show at least something when animations not supported */

.no-cssanimations .box li span{

	opacity: 1;

}

</style>

        <ul class="box">

            <li><span>Image 01</span><div class="title"><h3>第1张</h3></div></li>

            <li><span>Image 02</span><div class="title"><h3>第2张</h3></div></li>

            <li><span>Image 03</span><div class="title"><h3>第3张</h3></div></li>

        </ul>

</body>

</html>

其他：
1，相同参数的可以写在一起；
2，可以只有to， 也可以只有类似50%  省略0%和100%；因为后面的会重置前面的样式；

纯css3 轮播图利用keyframes的更多相关文章

纯CSS3轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
纯js轮播图练习-1
偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
css 纯css轮播图示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
纯js轮播图练习-2，js+css旋转木马层叠轮播
基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...
纯js轮播图练习-3，类似于淘宝海报带小圆点轮播图
基于js和css,跟着网上的视频教程,结合自己想要的效果,做出了一个类似于淘宝海报的效果. 如图:淘宝首页自己做的: 代码: <!DOCTYPE html> <html> & ...
纯js轮播图
<div id="wrapper"> <div id="container"> <img src="http://ima ...
纯CSS3实现轮播图
前言纯css3实现的轮播图效果,和JavaScript控制的相比,简单高效了很多,但是功能也更加单一,只有轮播不能手动切换. 用什么实现的呢?页面布局 + animation动画 HTML部分 &l ...
纯CSS实现轮播图效果，你不知道的CSS3黑科技
前言轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
css3 - 纯css实现一个轮播图
这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...

随机推荐

关于git的ssh-key:解决本地多个ssh-key的问题
在设置github的时候,官方的说明文档要求备份当前的id_rsa.然后生成一份新的私钥用于github的登陆.假设真这样做,那么新的私钥是无法再继续登陆之前的机器的. 这样的方法有点暴力- 还好ss ...
三层架构与MVC
三层简介先说说Web三层架构这个古老话题.地球人都知道web三层架构是指: • >用户接口层(UI Layer) • >业务逻辑层(Bussiness Layer) • >持久化层 ...
JAVA: httpclient 具体解释——第五章；
httpclient 具体解释--第一章: httpclient 具体解释--第二章: httpclient 具体解释--第三章: httpclient 具体解释--第四章: httpclient 具 ...
【互动问答分享】第15期决胜云计算大数据时代Spark亚太研究院公益大讲堂
"决胜云计算大数据时代" Spark亚太研究院100期公益大讲堂 [第15期互动问答分享] Q1:AppClient和worker.master之间的关系是什么? AppClien ...
Android中一个类实现的接口数不能超过七个
近期一段时间,在开发Android应用程序的过程中,发现Android中一个类实现的接口数超过七个的时候,常常会出现超过第7个之后的接口不能正常使用.
GDB十几分钟教程
GDB十分钟教程作者: liigo原文链接: http://blog.csdn.net/liigo/archive/2006/01/17/582231.aspx日期: 2006年1月16日本文写给 ...
NOI 评价体系 arbiter 安装方法常见的问题移植
#!/bin/bash AppPath="$PWD" 读取当前文件夹 echo "Arbiter is installing..." sudo apt-ge ...
POJ 1019 Number Sequence 解读
这是一个看似简单,其实很难受. 本来我想发挥它的标题轨道基础.没想到反被消遣-_-|||. 看它在个人基础上,良好的数学就干脆点,但由于过于频繁,需求将被纳入全,因此,应该难度4星以上. 方法就是直接 ...
emeditor 配置教程
1.众多的图形界面配置功能通过查看EmEditor的安装目录,可以发现,EmEditor有几个配置文件,理论上应该可以通过修改配置文件来达到配置EmEditor的目的.然而,打开配置文件一看,如果 ...
Hadoop-2.2.0中文文档—— MapReduce下一代- 可插入的 Shuffle 和 Sort
简单介绍可插入的 shuffle 和 sort 功能,同意在shuffle 和 sort 逻辑中用可选择的实现类替换.这个情况的样例是:用一个不是HTTP的应用协议,如RDMA来 shuffle 从 ...

纯css3 轮播图 利用keyframes

纯css3 轮播图 利用keyframes的更多相关文章

随机推荐

热门专题

纯css3 轮播图利用keyframes

纯css3 轮播图利用keyframes的更多相关文章