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>

利用CSS3代码编写45款按钮效果

css3代码做一个动态加载效果

vuejs如何实现文字上下滚动效果

vue页面如何利用插件实现列表滚动循环

html利用marquee标签实现滚动效果（上下左右）

标签： css3代码, 文字滚动

上面是“css3+html做一个简单的横向滚动文字效果”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_20533.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！