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

一、前言

实现功能：

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

        第一种是用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动画

    
    
    走马灯
    
    
        *{
            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;
        }
    


    
        
        

 2. CSS动画

    
    
    走马灯
    
        *{
            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);
            }
        }
    


    
        
        

四、答疑解惑

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

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

博主VX：18884281851

谢谢各位的支持~~