纯CSS3 横向滚动 纵向滚动 代码 附html

为了简单，我直接用的文字缩进，也可以用（-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);），根据自己的实际需求来搞，如果是动态数据，就要结合着js或者jq一起。有不足可以提出，先看下代码参考。

css部分

.diamond{
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
}
.diamond {
  animation: show 5s linear infinite;
}

@keyframes show {
  0% {text-indent: 0;}
  5% {text-indent: -10vh;}
  10% {text-indent: -20vh;}
  40% {text-indent: -80vh;}
  60% {text-indent: -120vh;}
  80% {text-indent: -160vh;}
  90% {text-indent: -180vh;}
  100% {text-indent: -200vh;}
}

html

<div class="diamond">
        记得早先少年时 
    　　大家诚诚恳恳 
    　　说一句 是一句
</div>