CSS3动画详解(结合实例) (2)

我们接下来看第二个案例:轮播图。这个案例比较简单

实现思路:

定义一个父级,规定宽度和高度只能显示一个轮播图大小,超出部分隐藏

//html <div></div> //css .carousel{ width:100px; height:100px; overflow: hidden; }

定义存放所有轮播图的盒子

//html <div> <div></div> </div> //css .items{ color:#FFF; width:420px; //存放4个轮播图 position:absolute; //动画更改left达到轮播滚动的效果 left:0px; animation:carouselMove 3s infinite; //定义动画相关属性 }

定义动画

//通过不断改变items的位置,从而显示不同的轮播图,实现效果 //当动画结束之后,又返回初始值,可以无数循环 @keyframes carouselMove{ 0%{ left:0px; } 35%{ left:-100px; } 70%{ left:-200px; } 100%{ left:-300px; } }

完整代码:

//html <div> <div> <div>轮播1</div> <div>轮播2</div> <div>轮播3</div> <div>轮播4</div> </div> </div> //css .carousel{ width:100px; height:100px; position:relative; left:400px; top:100px; overflow: hidden; } .items{ color:#FFF; width:420px; position:absolute; left:0px; animation:carouselMove 3s infinite; animation-direction: normal; /*animation-timing-function:easy 规定动画运动的速度 animation-iteration-count:infinite 播放无数次*/ -webkit-animation:carouselMove 3s infinite; -moz-animation-direction: normal; } .item1,.item2,.item3{ width:100px; height:100px; float:left; } .item1{ background-color: #12B7F5; } .item2{ background-color: #F9B041; } .item3{ background-color: #CCCCCC; } //定义动画 @keyframes carouselMove{ 0%{ left:0px; } 35%{ left:-100px; } 70%{ left:-200px; } 100%{ left:-300px; } }

以上就是CSS3动画的部分知识啦！谢谢！
需要源码的可以到这里下载:
源码