CSS 文字从左到右滚动 （右进左出） && 划过暂停

结构

　　<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;

}