<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 动画</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
.view {
width: 882px;
height: 86px;
margin: 200px auto;
position: relative;
overflow: hidden;
border: 3px solid red;
}
ul {
width: 1764px;
height: 86px;
padding: 0;
margin: 0;
list-style: none;
position: absolute;
left: 0;
animation: move 7s linear infinite;
}
li {
float: left;
font-size: 0;
}
@keyframes move {
0%{
}
100%{
transform:translateX(-882px)
}
}
.view:hover ul{
/*
animation-paly-state:
running:播放
paused: 暂停
*/
/* 鼠标移动的轮播图时 动画停止*/
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="view">
<ul>
<li><img src="./images/1.jpg" alt=""></li>
<li><img src="./images/2.jpg" alt=""></li>
<li><img src="./images/3.jpg" alt=""></li>
<li><img src="./images/4.jpg" alt=""></li>
<li><img src="./images/5.jpg" alt=""></li>
<li><img src="./images/6.jpg" alt=""></li>
<li><img src="./images/7.jpg" alt=""></li>
<li><img src="./images/1.jpg" alt=""></li>
<li><img src="./images/2.jpg" alt=""></li>
<li><img src="./images/3.jpg" alt=""></li>
<li><img src="./images/4.jpg" alt=""></li>
<li><img src="./images/5.jpg" alt=""></li>
<li><img src="./images/6.jpg" alt=""></li>
<li><img src="./images/7.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 动画</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
.view {
width: 882px;
height: 86px;
margin: 200px auto;
position: relative;
overflow: hidden;
border: 3px solid red;
}
ul {
width: 1764px;
height: 86px;
padding: 0;
margin: 0;
list-style: none;
position: absolute;
left: 0;
animation: move 7s linear infinite;
}
li {
float: left;
font-size: 0;
}
@keyframes move {
0%{
}
100%{
transform:translateX(-882px)
}
}
.view:hover ul{
/*
animation-paly-state:
running:播放
paused: 暂停
*/
/* 鼠标移动的轮播图时 动画停止*/
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="view">
<ul>
<li><img src="./images/1.jpg" alt=""></li>
<li><img src="./images/2.jpg" alt=""></li>
<li><img src="./images/3.jpg" alt=""></li>
<li><img src="./images/4.jpg" alt=""></li>
<li><img src="./images/5.jpg" alt=""></li>
<li><img src="./images/6.jpg" alt=""></li>
<li><img src="./images/7.jpg" alt=""></li>
<li><img src="./images/1.jpg" alt=""></li>
<li><img src="./images/2.jpg" alt=""></li>
<li><img src="./images/3.jpg" alt=""></li>
<li><img src="./images/4.jpg" alt=""></li>
<li><img src="./images/5.jpg" alt=""></li>
<li><img src="./images/6.jpg" alt=""></li>
<li><img src="./images/7.jpg" alt=""></li>
</ul>
</div>
</body>
</html>