全美商学院
新闻
新闻

成都网站建设如何使用CSS创建滚动文本

2018
10/09
17:46
全美网络官网
分享

成都网站建设如何使用CSS创建滚动文本可以帮助您提升您的网站,为访问者提供更具视觉吸引力的体验。最好的部分?学习如何在CSS中创建文本滚动并不像看起来那么棘手。一旦您学会了如何创建滚动文本,您就可以用它来制作新闻自动收报机、为电影制作片尾字幕,甚至让游客沉浸在遥远的银河系中。

技术沟通

虽然一般来说,最好让您的网站保持简单并以内容为中心,但偶尔的创意触动可以大大吸引新访问者。本指南将教您如何生成滚动文本动画CSS和HTML样式。我们还提供了四个代码模板,您可以复制和调整以轻松为您的站点创建自己的滚动文本。

如何在CSS中创建滚动文本

要创建我们的滚动文本,我们将使用CSS动画与transform:translateX和transform:translateY属性配对。为确保跨浏览器兼容性,我们还将添加带有供应商前缀-webkit-(适用于Safari和Chrome)和-moz-(适用于Firefox)的动画规则。准备好开始创建滚动文本动画CSS样式了吗?让我们从从右到左的文本开始。

CSS水平滚动文本:从右到左

要使文本从右向左滚动,请将其放在ID为scroll-text的div中。该元素将在其容器divscroll-container内移动。

您必须修改CSS才能创建所需的文本滚动效果。要更改滚动速度,请将动画属性的秒值从10秒更改为其他数字。较低的值会加快滚动效果,而较高的值会减慢滚动效果。

滚动速度也受div宽度的影响:滚动容器越宽,文本滚动速度越快。这意味着如果调整浏览器窗口的大小,文本速度会发生变化。您可以将滚动容器宽度设置为特定像素值来解决此问题。

CSS水平滚动文本:从左到右

对于从左到右的滚动文本,只需交换正负translateX值即可。我们会将100%的所有实例更改为-100%以及-100%的所有实例更改为100%。我还将scroll-text中的文本右对齐。这使得文本立即出现在动画的开始处。

CSS垂直滚动文本:自下而上

要使文本垂直滚动,请将所有出现的translateX更改为translateY。我还将文本居中,将动画持续时间减少到5秒,并为div容器指定了一个高度值。结果,垂直滚动更加明显。

CSS垂直滚动文本:从上到下

与水平滚动类似,我们只需要翻转我们的正负translateY值来改变垂直滚动的方向。

JavaScript滚动文本

现在我们已经介绍了创建滚动文本的基础知识,让我们深入了解创建更详细的元素所需了解的内容。更动态的滚动文本元素可能需要JavaScript来模拟字幕效果。为此,我们提供了一些使用JavaScript的示例。

第一个示例使用JavaScript(特别是jQuery)从一组列表项生成旋转的自动收报机动画。此实现的令人兴奋之处在于,您可以根据需要添加任意数量的列表项—而且您无需更改脚本。

HTML5滚动文本:关于跑马灯元素的注意事项

除了CSS动画之外,您还可以使用元素使用纯HTML创建滚动文本。此标记自动生成带有滚动文本的页面区域。


联系我们
欢迎来到全美,免费
获取专业网站建设方案
电话咨询:

18140041855

您还可以预约资深顾问
隐私信息保护中,请放心填写

在线客服

电话咨询

微信咨询

微信号复制成功
18140041855 (苏女士)
打开微信,粘贴添加好友,免费询价吧