結構
<div class='divWrap'>
<div class='div'>
CSS 文字從左到右滾動(所需要滾動的文字)
</div>
</div>
css樣式
.divWrap{
width: 300px;//(寬度)
overflow: hidden;//(超出隱藏)
}
.div{
display: inline-block;
white-space: nowrap;
animation: 10s div linear infinite normal;
}
//根據自己情況調節,
@keyframes div {
//起始位置
0% {
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
//終點位置
100% {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
}
//划過暫停
.div:hover{
display: inline-block;
white-space: nowrap;
animation:10s div linear infinite normal paused;
}