自动滚动
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>Documenttitle>
<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">0span>
<span class="family_0_number">0span>
li>
<li>
<span class="family_1">1span>
<span class="family_1_number">1span>
li>
<li>
<span class="family_2">2span>
<span class="family_2_number">2span>
li>
<li>
<span class="family_3">3span>
<span class="family_3_number">3span>
li>
<li>
<span class="family_4">4span>
<span class="family_4_number">4span>
li>
<li>
<span class="family_5">5span>
<span class="family_5_number">5span>
li>
<li>
<span class="family_6">6span>
<span class="family_6_number">6span>
li>
<li>
<span class="family_7">7span>
<span class="family_7_number">7span>
li>
<li>
<span class="family_8">8span>
<span class="family_8_number">8span>
li>
<li>
<span class="family_9">9span>
<span class="family_9_number">9span>
li>
ul>
div>
div>
script>
body>
html>