<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: ;
padding: ;
}
div{
width: px;
height: px;
border: px solid #000;
margin: px auto;
background-color: blue;
overflow: hidden;
}
ul{
width: px;
height: px;
background-color: black;
animation:change s linear s infinite normal;
}
ul li{
width: px;
height: px;
list-style: none;
float: left;
border: px solid #000000;
box-sizing: border-box;
}
@keyframes change{
from{
margin-left: px;
}to{
margin-left: -px;
}
}
ul:hover{
animation-play-state:paused;
}
ul:hover li{
opacity: ;
}
ul li:hover{
opacity: ;;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="images-100/banner1.png" alt=""></li>
<li><img src="images-100/banner2.jpg" alt=""></li>
<li><img src="images-100/banner3.jpg" alt=""></li>
<li><img src="images-100/banner4.jpg" alt=""></li>
<li><img src="images-100/banner1.png" alt=""></li>
<li><img src="images-100/banner2.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
![【CSS3】設定超連結樣式超連結樣式[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)