纯CSS实现⽂字⽆缝滚动（前端）<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
/*    body {
animation: roll 2s infinite;
}*/
.cont-boss {
/*width: 500px;*/
height: 200px;
/*border: 2px solid black;*/
/*background: pink;*/
text-align: center;
margin: 100px auto;
overflow: hidden;
/*animation: roll 2s infinite;*/
/
*margin: 20px;*/
padding: 20px;
}
html滚动效果代码
.cont {
animation: roll 8s linear infinite;
}
/*    .cont_h,.cont-p {
animation: roll 2s infinite;
}*/
.cont_h {
background: purple;
height: 35px;
font-size: 30px;
border: 2px solid black;
text-align: center;
line-height: 35px;
}
.cont-p {
background: deeppink;
height: 30px;
font-size: 10px;
text-align: center;
line-height: 30px;
border: 1px solid black;
}
.cont-p:nth-child(2n) {
background: white;
}
@Keyframes roll {
0% {
transform: translateY(0%);
transform: translateY(0%);
}
to {
transform: translateY(-100%);            }
}
</style>
</head>
<body>
<div class="cont-boss">
<div class="cont">
<h1 class="cont_h">kdldlfjlfdjk</h1>        <p class="cont-p">djk1</p>
<p class="cont-p">dfsf2</p>
<p class="cont-p">3fdffd3</p>
<p class="cont-p">ddfdsf</p>
<p class="cont-p">flkfjfs</p>
<p class="cont-p">flkfjfs</p>
<p class="cont-p">flkfjfs</p>
<p class="cont-p">flkfjfs</p>
<p class="cont-p">flkfjfs</p>
<p class="cont-p">flkfjfs</p>
<p class="cont-p">flkfjfs</p>
<p class="cont-p">flkfjfs</p>
</div>
<div class="cont">
<h1 class="cont_h">kdldlfjlfdjk</h1>        <p class="cont-p">djk1</p>
<p class="cont-p">dfsf2</p>
<p class="cont-p">3fdffd3</p>
<p class="cont-p">ddfdsf</p>
<p class="cont-p">flkfjfs</p>
<p class="cont-p">flkfjfs</p>
<p class="cont-p">flkfjfs</p>
<p class="cont-p">flkfjfs</p>
<p class="cont-p">flkfjfs</p>
<p class="cont-p">flkfjfs</p>
<p class="cont-p">flkfjfs</p>
<p class="cont-p">flkfjfs</p>
</div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。