前端css3实现轮播图

以下是css3最简单的轮播图实现

DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
*{
    padding: 0%;
    margin: 0%
                }
.element {
	width: 400px;
	height: 300px;
	
	overflow: hidden;
}
 
.photo {
	width: 1200px;
	
	animation: move 5s ease-out infinite;
}
 
img {
    
    float: left;
	width: 400px;
	height: 300px;
}
 
@keyframes move {
	0%,40% {
		margin-left: 0;
	}
	40%,60% {
		margin-left: -400px;
	}
	60%,100% {
		margin-left: -800px;
	}
}
    style>
head>
<body>
    <div class="element">
        <div class="photo">
            <img src="./1.png" />
            <img src="./2.png" />
            <img src="./3.png" />
        div>
    div>
body>
html>

你可能感兴趣的:(前端,css3,css)