仿京東輪播圖css
/* html代碼 */
<html>
<head>
<meta charset="UTF-8">
<title> 仿京東輪播圖 </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="slider">
<ul>
<li><img src="img1.jpg" alt="圖片1"></li>
<li><img src="img2.jpg" alt="圖片2"></li>
<li><img src="img3.jpg" alt="圖片3"></li>
</ul>
</div>
<script src="slider.js"></script>
</body>
<html>
/* css代碼 */
#slider {
width: 500px;
height: 300px;
overflow: hidden;
margin: 50px auto;
}
#slider ul {
width: 1500px;
list-style: none;
margin: 0;
padding: 0;
position: relative;
animation: slide 10s infinite;
}
#slider ul li {
float: left;
}
#slider ul li img {
display: block;
width: 500px;
height: 300px;
}
@keyframes slide {
0% {
left: 0;
}
33.333% {
left: -500px;
}
66.667% {
left: -1000px;
}
100% {
left: 0;
}
}上一篇css選擇器文字豎著排列
下一篇mysql 蜜罐