纯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 ...

随机推荐

Python3.2官方文档-日志和弱引用
8.5 日志 Logging模块提供了一些功能全面和灵活的日志系统.最简单的形式就是把日志信息发送到一个文件或sys.stderr; import logging logging.debug('Deb ...
android 自己定义开关（SwitchButton）
近期心血来潮,写了一个自己定义仿iPhone的开关. 有须要的同学能够来下载啦.支持点击自己主动滚动,速率能够自己依据须要改动.触摸滚动,大小自己定义,支持改动样式.就不录制动画,就上传了两张图给大家 ...
WPF换肤之三：WPF中的WndProc
原文:WPF换肤之三:WPF中的WndProc 在上篇文章中,我有提到过WndProc中可以处理所有经过窗体的事件,但是没有具体的来说怎么可以处理的. 其实,在WPF中,要想利用WndProc来处理所 ...
ClientID 获取服务端控件,客户端id的方法
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
[思考] hdu 4811 Ball
意甲冠军: 有三种颜色的小珠,每种颜色的量R,Y,B 转球进入桌面成序,有多少种不同的颜色分别砍下的球在球门前+有多少身后球不同的颜色问:最大的总比分值思考: 球和后面的球先放好.剩下的就放中间了 ...
JS window.open()财产
一. Window 对象 Window 对象是 JavaScript 顶级对象层次. Window 对象表示一个浏览器窗口或帧. Window 在对象 <body> 或 <frame ...
zerglurker的c语言教程006——第一功能
行,以往的经验教训后,.成员main性能.变数.命名等基本概念应该有一个初步的了解下面,我们就可以开始我们自己的第一个定义的函数. 仿照头等舱.操作的第二个教训.添加一个新的项目的解决方案Lessi ...
DHCP Option 60 认识
原文地址: http://blog.163.com/chenqioulin_1983/blog/static/83216232010109104430251/ 首先还是看看RFC咋说的吧.DHCP ...
air mobile andriod ios 页面加载控件
通过最近的研究flex 书写android .ios申请书,我们遇到了一个问题加载页面,我们用flex sdk 12,air 15 无级似android ListView寻呼模块.所以,我和我的同事们 ...
FTP文件操作之上传文件
上传文件是一个比较常用的功能,前段时间就做了一个上传图片的模块.开始采用的是共享文件夹的方式,后来发现这种方法不太好.于是果断将其毙掉,后来选择采用FTP的方式进行上传.个人感觉FTP的方式还是比较好 ...

纯css3 轮播图 利用keyframes

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

随机推荐

热门专题

纯css3 轮播图利用keyframes

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