为您的网站添加动画可以让您的网站更具互动性和精彩。实现这一目标的最佳方法之一是创建滚动字幕 – 一种非常时尚的动画，可以在技能或工具等平滑内容上滑动，使您的网站脱颖而出。
在本教程中，我将向您展示如何仅使用 html 和 css 创建无限滚动选取框。
什么是天棚？
滚动字幕是一种简单的动画，内容在屏幕上无休止地移动。这可以用来展示技能、技术和功能等文本。
让我们编码一下
html 结构
立即学习“前端免费学习笔记（深入）”；
首先创建html结构
html css javascript react js node js sql git aws azurehtml css javascript react js node js sql git aws azuretypescript redux bootstrap material ui tailwind scss webpack babel npm jenkinstypescript redux bootstrap material ui tailwind scss webpack babel npm jenkinsrest api docker linux seo agile methedology jira sdlcrest api docker linux seo agile methedology jira sdlc
每个块都包含一个技能或物品，两个相同的块确保连续滚动。
css
现在添加滚动的 css 样式
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Montserrat", sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #161616; } .scroll { position: relative; display: flex; width: 700px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #fff 30%, #fff 70%, transparent); } .scroll div { white-space: nowrap; animation: animate var(--t) linear infinite; } .scroll div:nth-child(2) { animation: animate2 var(--t) linear infinite; } @keyframes animate { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @keyframes animate2 { 0% { transform: translateX(0); } 100% { transform: translateX(-200%); } } .scroll div span { display: inline-flex; margin: 10px; padding: 5px 10px; border-radius: 5px; text-transform: uppercase; background: #333; color: #fff; transition: 0.5s; } .scroll div span:hover { background: #f52789; cursor: pointer; }
它是如何运作的
流畅的动画：
@keyframes 规则指定平滑滚动效果，animation 属性将其应用于
无涯·问知
无涯·问知，是一款基于星环大模型底座，结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品
153 查看详情 
。
无缝循环：
两个相同的
部分通过中途开始一个块来创造无限滚动的错觉。
悬停效果：
当您将鼠标悬停在某个项目上时，其背景会变为亮粉色 (#f52789)。
定制您的天棚
更改项目：更新 标签以显示您自己的内容，例如服务、工具或推荐。
调整速度：使用–t css变量来控制动画持续时间。值越小，速度越快。
更改颜色：自定义背景和文本颜色以适合您网站上的主题。
结论
滚动字幕是一项简单而强大的功能，可以让您的网站引人入胜。本教程将教您如何轻松创建适合您的内容和设计偏好的滚动字幕。试试这个。
以上就是Create a Infinite Scrolling Marquee with HTML and CSS的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1151764.html
微信扫一扫 
支付宝扫一扫 
![Win10与Ubuntu 18.04双系统安装。（Win10引导Linux）[通俗易懂]](https://www.chuangxiangniao.com/wp-content/uploads/2025/10/175254039529565.jpg)
![Win10与Ubuntu 18.04双系统安装。（Win10引导Linux）[通俗易懂]](https://www.chuangxiangniao.com/wp-content/uploads/2025/10/175254039878675.jpg)
![Win10与Ubuntu 18.04双系统安装。（Win10引导Linux）[通俗易懂]](https://www.chuangxiangniao.com/wp-content/uploads/2025/10/175254039840102.jpg)
![Win10与Ubuntu 18.04双系统安装。（Win10引导Linux）[通俗易懂]](https://www.chuangxiangniao.com/wp-content/uploads/2025/10/175254040055572.jpg)
