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

随机推荐

eclipse加入辅助线,配合代码格式化使用
oracle看到用户的所有表名、表睐、字段名称、现场的目光、是空的、字段类型
--oracle看到用户的所有表名.表睐.字段名称.现场的目光.是空的.字段类型 select distinct TABLE_COLUMN.*, TABLE_NALLABLE.DATA_TYPE, T ...
上delloc 无呼叫故障排除笔记
经验 delloc 无呼叫基本上可以得出结论,即循环引用的原因. 遇到这样的情况基本上可分为 1: 属性声明weak的地方写成了 strong .比方delegate. 2: block语法块中 ...
理解RESTful架构（转）
越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency).高 ...
Java EE (7) -- Java EE 6 Enterprise Architect Certified Master(1z0-807)
Application Design Concepts and Principles Identify the effects of an object-oriented approach to sy ...
数据验证validator 与　DWZ
在进行系统经常使用的数据验证.数据验证可以编写自己的,它也可以用来作为现在.现在,记录这两个库的使用, validator <!DOCTYPE HTML PUBLIC "-//W3C/ ...
Oracle Hints详细解释
特别介绍给大家Oracle Hints之前,让我们知道下Oracle Hints什么,然后好Oracle Hints,我们希望实际.基于成本的优化器是很聪明,在大多数情况下,将选择正确的优化,减少DB ...
IOT(Index Organized Table)
我们知道一般的表都以堆(heap)的形式来组织的,这是无序的组织方式.Oracle还提供了一种有序的表,它就是索引组织表,简称IOT表.IOT表上必须要有主键,而IOT表本身不对应segment,表里 ...
重新想象 Windows 8 Store Apps (11) - 控件之 ListView 和 GridView
原文:重新想象 Windows 8 Store Apps (11) - 控件之 ListView 和 GridView [源码下载] 重新想象 Windows 8 Store Apps (11) - ...
Silverlight的Socket通信
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPwAAAGwCAIAAAACJJ+TAAAgAElEQVR4nO2deXgT5534Rdhskme7+9

纯css3 轮播图 利用keyframes

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

随机推荐

热门专题

纯css3 轮播图利用keyframes

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