自动滚动
<!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>
<script src="../05jQuery/libs/jquery-1.12.4.min.js"></script>
</head>
<style>
@keyframes row {
0% {}
100% {
transform: translateY(-50%);
}
}
.monitor .marquee-view {
overflow: hidden;
}
/* 调用动画 */
.monitor .marquee {
/* //infinite永久调用动画 */
animation: row 10s linear infinite;
}
/*鼠标划入 停止动画 */
.monitor .marquee:hover {
animation-play-state: paused;
}
.pannel {
height: 100px;
overflow-y: scroll;
}
</style>
<body>
<div class="monitor">
<div class="marquee-view pannel">
<ul class="marquee">
<li>
<span class="family_0">0</span>
<span class="family_0_number">0</span>
</li>
<li>
<span class="family_1">1</span>
<span class="family_1_number">1</span>
</li>
<li>
<span class="family_2">2</span>
<span class="family_2_number">2</span>
</li>
<li>
<span class="family_3">3</span>
<span class="family_3_number">3</span>
</li>
<li>
<span class="family_4">4</span>
<span class="family_4_number">4</span>
</li>
<li>
<span class="family_5">5</span>
<span class="family_5_number">5</span>
</li>
<li>
<span class="family_6">6</span>
<span class="family_6_number">6</span>
</li>
<li>
<span class="family_7">7</span>
<span class="family_7_number">7</span>
</li>
<li>
<span class="family_8">8</span>
<span class="family_8_number">8</span>
</li>
<li>
<span class="family_9">9</span>
<span class="family_9_number">9</span>
</li>
</ul>
</div>
</div>
</script>
</body>
</html>
