css3+html做一个简单的横向滚动文字效果

功能介绍：利用css3和html做一个由右向左走动的文字效果，不用javascript！

具体实现代码如下：

1、css3样式：

#scrollFonts {
  width: 60%;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
}
#fonts {
  //文字改成自己喜欢的
  font-family: Georgia, times new roman, Times, Kai, kaiti sc, KaiTi, BiauKai, FontAwesome, serif;
  font-size: 16px;
  display: inline-block;
  animation: scrollLeft 30s linear infinite;
  transform: translateX(0); /* 初始位置 */
}
@keyframes scrollLeft {
  0% { transform: translateX(50%); } /* 这个可以改，个人感觉这个效果比较好 */
  100% { transform: translateX(-100%); }
}

2、html代码：

<div id="scrollFonts">
    <span id="fonts">
        生如蝼蚁，当立鸿鹄之志。命薄如纸，应有不屈之心。大丈夫生于天地间，岂能郁郁久居人下？当以梦为马，不负韶华。乾坤未定，你我皆是黑马。纵遭风雨摧折亦要振翅高翔；纵遇迷雾遮途，仍需执炬前行。
    </span>
</div>