前端小案例——走马灯（文字水平轮播, 附源码）

已于 2024-05-24 09:18:18 修改
阅读量2.4k 收藏 16
点赞数 11
分类专栏： web 文章标签： 前端 html css
于 2024-01-31 21:56:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2202_75550100/article/details/135959004
版权

一、前言

实现功能：

        水平滚动的文本效果，可以通俗的来说也叫“走马灯”，这里博主用了两种方法实现。

        第一种是用gsap动画库完成的，这种方法更为简单也更为高效。

        第二种使用CSS动画完成的，这是一种常见的方式对于对gsap动画不熟悉的小伙伴，也可以参考这种方法。

        两种方式博主都提供了源码供大家参考学习。

实现逻辑 

1. gsap动画库

  1. 在HTML头部引入GSAP动画库的JS文件。
  2. 使用CSS样式进行美化，设置了背景颜色、圆角等属性。
  3. 添加SVG格式的音频图标。
  4. 使用GSAP库创建一个滚动动画效果，选择class为"one"的元素，并将其向左移动390像素，持续时间为10秒，使用Linear缓动函数（即匀速运动），并设置重复次数为无限次。

 2. CSS动画

  1. 创建一个包含滚动消息框的div元素，并设置样式类名为sound。
  2. 使用CSS样式进行美化，设置了背景颜色、圆角等属性。
  3. 添加SVG格式的音频图标。
  4. 在li元素中添加一个p元素，设置初始文本内容并设置样式类名为text。
  5. 使用CSS样式的@keyframes来定义动画效果，首先，定义了一个名为slideLeft的动画；0%和100%：分别表示动画的起始状态和结束状态；linear：指定动画的缓动函数为线性，即动画按照相同的速度进行；infinite：指定动画无限循环播放，当动画播放到最后一帧时立即回到第一帧重新开始。transform: translateX(408px)和transform: translateX(-390px)：在起始状态和结束状态时，通过transform属性的translateX函数改变元素的水平位置。translateX(408px)将元素从初始位置向右偏移408像素，translateX(-390px)将元素从右侧移到左侧，形成一个循环滚动的效果。

二、项目运行效果 

三、全部代码

1. gsap动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>走马灯</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
            background-repeat: no-repeat;
        }
        .sound{
            width: 480px;
            background-color: #c5eee3;
            color: #47a189;
            border-radius: 20px;
            margin: 20px auto;
            display: flex;
            gap: 10px;
            overflow: hidden;
            line-height: 37px;
            align-items: center;
        }
        .sound .icon{
            width: 28px;
            height: 28px;
            padding-left: 10px;
        }
        .sound li{
            width: 85%;
            overflow: hidden;
        }
        .sound li p{
            width: 100%;
            transform: translateX(420px);
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="sound">
        <svg t="1706691814487" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1830"
            width="28" height="28">
            <path
                d="M257.493333 322.4l215.573334-133.056c24.981333-15.413333 57.877333-7.914667 73.493333 16.746667 5.301333 8.373333 8.106667 18.048 8.106667 27.914666v555.989334C554.666667 819.093333 530.784 842.666667 501.333333 842.666667c-9.994667 0-19.786667-2.773333-28.266666-8L257.493333 701.6H160c-41.237333 0-74.666667-33.013333-74.666667-73.738667V396.138667c0-40.725333 33.429333-73.738667 74.666667-73.738667h97.493333z m26.133334 58.4a32.298667 32.298667 0 0 1-16.96 4.8H160c-5.888 0-10.666667 4.714667-10.666667 10.538667v231.733333c0 5.813333 4.778667 10.538667 10.666667 10.538667h106.666667c5.994667 0 11.872 1.664 16.96 4.8L490.666667 770.986667V253.013333L283.626667 380.8zM800.906667 829.653333a32.288 32.288 0 0 1-45.248-0.757333 31.317333 31.317333 0 0 1 0.768-44.693333c157.653333-150.464 157.653333-393.962667 0-544.426667a31.317333 31.317333 0 0 1-0.768-44.682667 32.288 32.288 0 0 1 45.248-0.757333c183.68 175.306667 183.68 460.010667 0 635.317333z m-106.901334-126.186666a32.288 32.288 0 0 1-45.248-1.216 31.328 31.328 0 0 1 1.237334-44.672c86.229333-80.608 86.229333-210.56 0-291.178667a31.328 31.328 0 0 1-1.237334-44.672 32.288 32.288 0 0 1 45.248-1.216c112.885333 105.546667 112.885333 277.418667 0 382.965333z"
                fill="#47a189" p-id="1831">
            </path>
        </svg>
        <li><p class="text">欢迎来到「博客的文章」，一个小小的赞和留言也是博主最大的动力</p></li>
    </div>
    <script>
        gsap.to('.text',{x: -480 ,duration: 10, ease: Linear.easeNone, repeat: -1 });                
    </script>
</body>
</html>

 2. CSS动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>走马灯</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
            background-repeat: no-repeat;
        }
        .sound{
            width: 480px;
            background-color: #c5eee3;
            color: #47a189;
            border-radius: 20px;
            margin: 20px auto;
            display: flex;
            gap: 10px;
            overflow: hidden;
            line-height: 37px;
            align-items: center;
        }
        .sound .icon{
            width: 28px;
            height: 28px;
            padding-left: 10px;
        }
        .sound li{
            width: 85%;
            overflow: hidden;
        }
        .sound li p{
            width: 100%;
            transform: translateX(420px);
            white-space: nowrap;
        }
        .text {
            animation: slideLeft 10s linear infinite;
        }

        @keyframes slideLeft {
            0% {
                transform: translateX(408px);
            }
            100% {
                transform: translateX(-480px);
            }
        }
    </style>
</head>
<body>
    <div class="sound">
        <svg t="1706691814487" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1830"
            width="28" height="28">
            <path
                d="M257.493333 322.4l215.573334-133.056c24.981333-15.413333 57.877333-7.914667 73.493333 16.746667 5.301333 8.373333 8.106667 18.048 8.106667 27.914666v555.989334C554.666667 819.093333 530.784 842.666667 501.333333 842.666667c-9.994667 0-19.786667-2.773333-28.266666-8L257.493333 701.6H160c-41.237333 0-74.666667-33.013333-74.666667-73.738667V396.138667c0-40.725333 33.429333-73.738667 74.666667-73.738667h97.493333z m26.133334 58.4a32.298667 32.298667 0 0 1-16.96 4.8H160c-5.888 0-10.666667 4.714667-10.666667 10.538667v231.733333c0 5.813333 4.778667 10.538667 10.666667 10.538667h106.666667c5.994667 0 11.872 1.664 16.96 4.8L490.666667 770.986667V253.013333L283.626667 380.8zM800.906667 829.653333a32.288 32.288 0 0 1-45.248-0.757333 31.317333 31.317333 0 0 1 0.768-44.693333c157.653333-150.464 157.653333-393.962667 0-544.426667a31.317333 31.317333 0 0 1-0.768-44.682667 32.288 32.288 0 0 1 45.248-0.757333c183.68 175.306667 183.68 460.010667 0 635.317333z m-106.901334-126.186666a32.288 32.288 0 0 1-45.248-1.216 31.328 31.328 0 0 1 1.237334-44.672c86.229333-80.608 86.229333-210.56 0-291.178667a31.328 31.328 0 0 1-1.237334-44.672 32.288 32.288 0 0 1 45.248-1.216c112.885333 105.546667 112.885333 277.418667 0 382.965333z"
                fill="#47a189" p-id="1831">
            </path>
        </svg>
        <li><p class="text">欢迎来到「博客的文章」，一个小小的赞和留言也是博主最大的动力</p></li>
    </div>
</body>
</html>

四、答疑解惑

        这是一个非常适合前端入门练习的小案例，各位小伙伴可以自行更改样式和图片，如果大家运行时出现问题或代码有什么不懂的地方都可以随时评论留言或联系博主。

        还多请各位小伙伴多多点赞支持，你们的支持是我最大的动力。

博主VX：18884281851

谢谢各位的支持~~

花花´◡`
关注
  • 11
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端小练习——走马灯效果+网页页面换肤效果
weixin_51983027的博客
12-01 624
前端小练习——走马灯效果+网页页面换肤效果基于html。css。javascript的一个前端基础小练习overflow，animation，hover，document首先是进行设置走马灯的效果，用的是css去设置的，先把基本html骨架写好了，就是把基本元素都给摆出来，在进行css设置，遇到的问题竖着排列解决方案：浮动，在设置盒子模型的时候超出模型宽度，所以换行，解决方案：html的background 无序列表 盒子模型 浮动 css动画 伪类 一些css常用文本格式理解 javascript怎么获取
Vue.js轮播图走马灯代码实例（全）
10-17
主要介绍了Vue.js轮播图走马灯，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前端原生 CSS 跑马灯效果，无限轮播（横竖版本，带渐变遮罩，简单实用）
卡尔特斯
02-14 1万+
公式：主图张数 * 单个图片宽度（每轮主图只有 4 张，4 张照片为一个周期，如果需要轮播的主图为 7、8、9...张，都一样） *//* 为什么设置 -600px？公式：主图张数 * 单个图片高度（每轮主图只有 4 张，4 张照片为一个周期，如果需要轮播的主图为 7、8、9...张，都一样） *//* 重点：单个图片宽度 200，相当于默认不动可见 3 个 *//* 重点：单个图片高度 150，相当于默认不动可见 1 个 *//* 重点：盒子宽度 600 *//* 重点：盒子宽度 150 */
2024年前端最新分别用Js和vue实现跑马灯效果(1)，面试前端开发自我介绍
最新发布
2401_84446787的博客
05-07 438
正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。()方法接收两个参数，第一个参数是将要推迟执行的函数名或者一段代码，第二个参数是推迟执行的毫秒数。在上面的跑马灯效果中，当打开页面的时候，等待两秒钟，它会自动调用start方法，实现动起来的效果。
Vue学习之跑马灯效果，写给Web前端开发的小程序布局指南
m0_57540655的博客
04-10 657
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
探究前端的跑马灯效果是如何用css实现的
阿牛的博客
03-20 6292
无意见看到了一个网站的一个动画的跑马灯效果很不错，这篇博客将用css实现跑马灯效果，剖析它是如何实现的！并且我也推荐用css实现这种无缝滚动的跑马灯，效果看起来更平滑，用js定时器实现的会有明显的抖动效果！
前端实现文字跑马灯的三种方式
weixin_33936401的博客
11-05 1760
前言 最近写了一个文字跑马灯的项目需求，刚开始用js写，能够完成需求。后面想着换种方式(分别是html和css)来实现同一个需求,以减少性能消耗。 首先，需求分析: 需求点1.判断文字的长度和容器的长度，如果文字长度大于容器长度则开始滚动，否则不滚动； 需求点2.判断滚动滚动的结束，在结束的时间点触发事件(比如: 增减样式等操作)； 一、JS实现 思路: 1.判断文字的长度和容器的长度，如果文字长...
使用CSS实现文字跑马灯效果
mangobot的博客
04-21 1847
使用CSS实现文字跑马灯效果
简易css实现走马灯效果
qq_75222206的博客
07-14 1539
首先设置好走马灯的变化颜色。变化色我们可以通过在css中使用keyframes属性来实现。这里取名为changecolor。由于走马灯每隔一段时间就会变色，我们可以通过分成5段，每段使用不同的颜色。这样就实现了变色效果。接着设置变色时间和次数，这个可以通过animation属性得以实现。最后在html完成引用即可。
CSS中如何实现文字跑马灯效果？
官方推荐
09-04 9511
CSS中如何实现文字跑马灯效果？
前端开发——案例03(跑马灯)
weixin_52874695的博客
01-07 674
所需效果:在网页中可以循环播放。 需要将所有的图片放在同一个盒子里,重复放置多张图,防止循环时因为收尾图片没有连接在一起而出现空白 图片用列表排放
Android实现文字垂直滚动、纵向走马灯效果的实现方式汇总
08-28
Android 实现文字垂直滚动、纵向走马灯效果的实现方式汇总 Android 实现文字垂直滚动、纵向走马灯效果是 Android-applications 中常见的效果，本文将为大家分享三种实现这种效果的方式，并对相关属性和注意事项进行...
走马灯_走马灯/流水灯_51单片机小作品_
10-02
实现流水灯状态转变以及流速变化控制，通过数码管来显示状态数量，一共有8种变化种类，适合新手训练理解51单片机。
易语言源码易语言走马灯效果源码.rar
02-21
易语言源码易语言走马灯效果源码.rar 易语言源码易语言走马灯效果源码.rar 易语言源码易语言走马灯效果源码.rar 易语言源码易语言走马灯效果源码.rar 易语言源码易语言走马灯效果源码.rar 易语言源码易语言走马...
CSS实现文字跑马灯效果
时光清浅处，一步一安然
08-09 5628
* 最外层盒子，需要三个属性：定宽、文字不换行、超过隐藏 *//* 让前面的几个文字有一个初始的距离，达到更好的呈现效果 */在完成一个任务的时候，要求在表格中固定宽度的其中一个。/* 盒子背景宽度将随文字宽度而进行自适应 *//* 添加动画 */
Arduino制作跑马灯
热门推荐
ws15168689087的博客
05-03 3万+
Arduino制作跑马灯 目标一： 设计跑马灯（从左到右，从右到左依次闪烁） 线路图： 相关代码： void setup() { int i; //定义数据类型，设置输出引脚 for (i=2;i<=5;i++){ pinMode(i,OUTPUT); //数字化脚位，指定输入输出 } } void loop() { F1(); //F1子程序 delay(1000); F2();
html跑马灯代码大全(图片文字移动代码)
monkey131499的博客
10-05 1万+
...普通卷动  ...滑动  ...预设卷动  ...来回卷动  ...向下卷动  ...向上卷动  向右卷动  向左卷动  ...卷动次数  ...设定宽度  ...设定高度  ...设定背景颜色  ...设定滚动速度  ...设定卷动时间  ...鼠标经过上面时停止滚动  ...鼠标离开时开始滚动 width=960 height=30 scrollamo
单片机（3）跑马灯，按钮控制的跑马灯（2种编程）
weixin_64881985的博客
11-09 9277
8个灯的流水灯，两种编程。 初步理解高低电位
四个跑马灯的c语言程序,入门编程语言跑马灯，C语言设计跑马灯程序
weixin_34637138的博客
05-21 1万+
C语言设计跑马灯程序#include //51系列单片机定义文件#define uchar unsigned char //定义无符号字符#define uint unsigned int //定义无符号整数void delay(uint); //声明延时函数void main(void){uint i;uchar temp;while(1){temp=0x01;for(i=0;i&lt...
小程序文字走马灯无缝轮播
05-17
小程序文字走马灯可以通过使用 `scroll-view` 组件实现。具体实现步骤如下： 1. 在 `wxml` 文件中添加 `scroll-view` 组件，并设置 `scroll-x` 属性为 `true`，表示横向滚动。 ```html <scroll-view scroll-x="true" class="scroll-view"> <!-- 文字内容 --> <text>这是一条信息</text> <text>这是另外一条信息</text> <text>这是第三条信息</text> <!-- ... --> </scroll-view> ``` 2. 在 `wxss` 文件中给 `scroll-view` 组件添加样式，使其占据整个屏幕宽度，并隐藏水平滚动条。 ```css .scroll-view { width: 100%; overflow-x: hidden; } ``` 3. 在 `js` 文件中监听 `scroll-view` 组件的滚动事件，并设置一个定时器，每隔一定时间让 `scroll-view` 组件向左滚动一个固定宽度的距离（即一条信息的宽度）。 ```javascript Page({ data: { scrollLeft: 0, // scroll-view 组件的滚动距离 interval: 2000, // 定时器间隔时间，单位为毫秒 animationDuration: 500 // 滚动动画执行时间，单位为毫秒 }, onLoad: function () { // 获取 scroll-view 组件的宽度 wx.createSelectorQuery().select('.scroll-view').boundingClientRect((rect) => { this.setData({ scrollViewWidth: rect.width }) }).exec() // 开启定时器 setInterval(() => { // 计算下一次滚动的距离 const nextScrollLeft = this.data.scrollLeft + this.data.scrollViewWidth // 执行滚动动画 this.setData({ scrollLeft: nextScrollLeft, animationDuration: 500 }) setTimeout(() => { // 将滚动距离重置为 0，实现循环滚动 this.setData({ scrollLeft: 0, animationDuration: 0 }) }, this.data.animationDuration) }, this.data.interval) } }) ``` 通过以上步骤，就可以实现小程序文字走马灯的效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花花´◡`

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值