css动画属性实现轮播图的小demo

前言

上一篇总结了css3动画的属性，就把先前做的小demo做了一遍，来加深一些css动画属性，这篇博客仅仅是加深自己的能力啦，大神越过喵过。不过，我是向着大神的心，一直努力的，相信以自己的风格节奏学习总有一天，我自认为达到大神级别。想想多木帅。纯属个人ni想，不过我的博客我做主，管它呢。bb多了，直接上上自己的技术分享。

实现思路----动画属性实现轮播图

1.html文档结构

文档结构是必须的，代码如下：

2.在包裹图片的元素，设置animation动画属性，在帧@keyframes使其改变该属性的margin-left从而实现轮播的效果

注意：动画的停留时间，和过渡时间

假如6照片，设置“1张照片”的过渡时间，一共有100帧，故每张停留的时间为100/7，留一张照片的帧来做过渡帧效果。

效果图如下：

实现代码如下：

	
	
	


	
	

		
		

			
			
			
			
			
		
		
		

			1
			2
			3
			4
			5
		
	

使用css属性待解决轮播效果问题

大神有空，热烈欢迎留言

1.鼠标移动到照片或者下面标识（如：“1”，“2”）时，使俩者都处于相应的停留状态

2.鼠标移动到下面的标识，则自动匹配该标识的照片

生活寄语

爱代码，爱上生活！