CSS3实现简单的无缝轮播效果

柔情只为你懂 2022-03-15 15:46 677阅读 0赞

## **CSS实现简单的无缝轮播效果** ##

由于还没有接触到JS实现动态效果，但是比较想实现页面的简单轮播效果，翻了翻CSS标签，
    发现只有CSS3也可以实现动画效果，即通过animation动画标签，来实现动态的页面效果。

*以下是HTML模块*

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>动画轮播</title>
    		<link rel="stylesheet" type="text/css" href="../css/day12-2.css" />
    	</head>
    	<body>
    		<div class="container">
    			<div class="photo">
    				<img src="../images/img12-2-1.jpg" />
    				<img src="../images/img12-2-2.jpg" />
    				<img src="../images/img12-2-3.jpg" />
    				<img src="../images/img12-2-1.jpg" />
    				
    			</div>
    		</div>
    	</body>
    </html>

*以下是CSS模块*

*
    { 
    	margin: 0px;
    	padding: 0px;
    }
    .container
    { 
    	width: 533px;
    	height: 300px;
    	background: #00FFFF;
    	overflow:hidden;
    }
    /* 起到一个相框的作用,隐藏图片 */
    .photo
    { 
    	width: 9999px;
    	animation: switch 5s ease-out infinite;
    }
    /* 循环播放的容器的大小，要能装的下所有的图片 不然会间断显示 为图片按滑动主体*/
    .container img
    { 
    	display: block;
    	float: left;
    }
    /* 调整图片位置,实现从左至右滑动 */
    @keyframes switch{ 
    	0%
    	{ 
    		transform:translatex(0%);
    	}
    	20%
    	{ 
    		transform:translatex(0%);
    	}
    	25%
    	{ 
    		transform:translatex(-533px);
    	}
    	45%
    	{ 
    		transform:translatex(-533px);
    	}
    	50%
    	{ 
    		transform:translatex(-1066px);
    	}
    	70%
    	{ 
    		transform:translatex(-1066px);
    	}
    	100%
    	{ 
    		transform:translatex(-1599px);
    	}
    }
    /* 其实现的是动态移动 */

*实现的效果图：*  
![20190303205225839.gif][]  
其中，增加第一幅图为最后一张很关键，如果没有的话，在循环下一轮时会出现  
闪烁的情况。  
虽然css也能实现轮播效果，但是相对于js实现来说，功能性就弱了很多，  
无法控制暂停与播放，无法与用户产生交互，无法监听到状态的而变化等等，  
但是好处也很明显嘛！那就是。。。够简单

[20190303205225839.gif]: /images/20220315/212fa7febce14b26bc2e07b0c9e1d2b7.png