css3动画实现简单的幻灯片效果

css3 Animation属性

css3的animation属性可以像Flash制作动画一样，通过关键帧控制动画的每一步，实现复杂的动画效果。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

css3Animation属性详解

属性	描述	参数
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	指定 @keyframes 动画的名称。	动画名称自己起，与@keyframes规则名称相对应
animation-duration	指定动画完成一个周期所花费的秒或毫秒。默认是 0。	数值n
animation-timing-function	指定动画的速度曲线。默认是 "ease"。	linear：动画从头到尾的速度是相同的。 ease：动画以低速开始，然后加快，在结束前变慢。 ease-in：动画以低速开始。 ease-out：动画以低速结束。 ease-in-out：动画以低速开始和结束。 cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
animation-fill-mode	指定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。	none：动画在动画执行之前和之后不会应用任何样式到目标元素。 forwards：应用最后关键帧的样式 backwards：应用初始帧的样式 both：动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
animation-delay	指定动画何时开始。默认是 0。	数值n
animation-iteration-count	指定动画被播放的次数。默认是 1。	数值n: 一个数字，定义应该播放多少次动画 infinite：指定动画应该播放无限次
animation-direction	指定动画是否在下一周期逆向地播放。默认是 "normal"。	normal：动画按正常播放。 reverse：动画反向播放。 alternate：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 alternate-reverse：动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
animation-play-state	指定动画是否正在运行或暂停。默认是 "running"。	paused：暂停动画 running：运行动画

利用Animation属性实现一个简单的幻灯片切换效果

原理是通过animate的关键帧来切换元素的背景图片即可达到幻灯片切换效果

<body><div class="banner"></div>
</body>

.banner {width: 480px;height: 320px;margin: 150px auto;overflow: hidden;background-size: cover;background-position: center;animation-name: "banner";            // 动画名称animation-duration: 20s;             // 播放动画所需时间animation-timing-function: linear;   // 播放动画的速度animation-iteration-count: infinite; // 动画播放次数
}
@-webkit-keyframes 'banner' {0% {background: url('images/1.jpg') no-repeat;}25% {background: url('images/2.jpg') no-repeat;}50% {background: url('images/3.jpg') no-repeat;}75% {background: url('images/4.jpg') no-repeat;}100% {background: url('images/5.jpg') no-repeat;}
}

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料

css3动画实现简单的幻灯片效果相关推荐

用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
html实现ppt效果页面,CSS3+JavaScript实现翻页幻灯片效果
先上效果图 *{ margin: 0; padding: 0; } #content{ width: 500px; height: 300px; margin: 40px auto; position ...
美妙的 CSS3 动画！一组梦幻般的按钮效果
今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...
用css3动画做出从上飞入效果
用css3动画做出从上飞入效果用css3做出从上飞入效果: .fadeInDown {animation: fadeInDown 1s;-webkit-animation: fadeInDown 1 ...
css3动画实现最简单的幻灯片效果
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8&q ...
5分钟教你利用css3动画实现奔跑的北极熊效果
实现原理:利用css3动画中的animation-timing-function的steps(),让一张有连续动作图片一段一段的在页面上显示出来,从而实现动画效果. 1.需要素材: 2.准备一个div ...
css写的一个简单的幻灯片效果页面
制作幻灯片,第一反应是用css3的Animation,那我就简单介绍一下Animation. CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation. t ...
css3动画、2D与3D效果
1.兼容性 css3针对同一样式在不同浏览器的兼容需要在样式属性前加上内核前缀: 谷歌(chrome) -webkit-transition: Opera(欧鹏) -o-transition: ...
CSS3动画（简单动画的实现，如旋转等）
依靠CSS3中提出的三个属性:transition.transform.animation transition:定义了元素在变化过程中是怎么样的,包含transition-property.tran ...

css3动画实现简单的幻灯片效果

css3 Animation属性

css3Animation属性详解

利用Animation属性实现一个简单的幻灯片切换效果

css3动画实现简单的幻灯片效果相关推荐

最新文章

热门文章