1.代碼塊
index.html（圖片要自己加上去）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="tv">
<div id="screen">
<img src="圖片存放/劉亦菲1.jpg" height="300" width="730" />
<img src="圖片存放/劉亦菲2.jpg" height="300" width="730" />
<img src="圖片存放/劉亦菲3.jpg" height="300" width="730" />
<img src="圖片存放/劉亦菲4.jpg" height="300" width="730" />
</div>
</div>
</body>
</html>
css.css
#screen {
width: 9999px;
height: 9999px;
animation: 10s dfdfd infinite;
}
#screen img {
float: left;
margin-left: -6px;
}
#tv {
width: 2000;
height: 454;
overflow: hidden;
}
@keyframes dfdfd {
/* 0%{} */
25% {
transform: translateX(0px)
}
25.1015% {
transform: translateX(-730px)
}
50% {
transform: translateX(-730px)
}
50.1015% {
transform: translateX(-1460px)
}
75% {
transform: translateX(-1460px)
}
75.1015% {
transform: translateX(-2190px)
}
/* 100% {
transform: translateX(-2190px)
} */
}
效果圖（自左而右自動滑動）
