devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：笔触狂放9 | 2024-06-26 16:21:25

赞

踩

前端走马灯

一、前言

实现功能：

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>走马灯</title>
  7.     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             text-decoration: none;
  13.             list-style: none;
  14.             background-repeat: no-repeat;
  15.         }
  16.         .sound{
  17.             width: 480px;
  18.             background-color: #c5eee3;
  19.             color: #47a189;
  20.             border-radius: 20px;
  21.             margin: 20px auto;
  22.             display: flex;
  23.             gap: 10px;
  24.             overflow: hidden;
  25.             line-height: 37px;
  26.             align-items: center;
  27.         }
  28.         .sound .icon{
  29.             width: 28px;
  30.             height: 28px;
  31.             padding-left: 10px;
  32.         }
  33.         .sound li{
  34.             width: 85%;
  35.             overflow: hidden;
  36.         }
  37.         .sound li p{
  38.             width: 100%;
  39.             transform: translateX(420px);
  40.             white-space: nowrap;
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45.     <div class="sound">
  46.         <svg t="1706691814487" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1830"
  47.             width="28" height="28">
  48.             <path
  49.                 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"
  50.                 fill="#47a189" p-id="1831">
  51.             </path>
  52.         </svg>
  53.         <li><p class="text">欢迎来到「博客的文章」，一个小小的赞和留言也是博主最大的动力</p></li>
  54.     </div>
  55.     <script>
  56.         gsap.to('.text',{x: -480 ,duration: 10, ease: Linear.easeNone, repeat: -1 });                
  57.     </script>
  58. </body>
  59. </html>

 2. CSS动画

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>走马灯</title>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             text-decoration: none;
  12.             list-style: none;
  13.             background-repeat: no-repeat;
  14.         }
  15.         .sound{
  16.             width: 480px;
  17.             background-color: #c5eee3;
  18.             color: #47a189;
  19.             border-radius: 20px;
  20.             margin: 20px auto;
  21.             display: flex;
  22.             gap: 10px;
  23.             overflow: hidden;
  24.             line-height: 37px;
  25.             align-items: center;
  26.         }
  27.         .sound .icon{
  28.             width: 28px;
  29.             height: 28px;
  30.             padding-left: 10px;
  31.         }
  32.         .sound li{
  33.             width: 85%;
  34.             overflow: hidden;
  35.         }
  36.         .sound li p{
  37.             width: 100%;
  38.             transform: translateX(420px);
  39.             white-space: nowrap;
  40.         }
  41.         .text {
  42.             animation: slideLeft 10s linear infinite;
  43.         }
  44.  
  45.         @keyframes slideLeft {
  46.             0% {
  47.                 transform: translateX(408px);
  48.             }
  49.             100% {
  50.                 transform: translateX(-480px);
  51.             }
  52.         }
  53.     </style>
  54. </head>
  55. <body>
  56.     <div class="sound">
  57.         <svg t="1706691814487" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1830"
  58.             width="28" height="28">
  59.             <path
  60.                 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"
  61.                 fill="#47a189" p-id="1831">
  62.             </path>
  63.         </svg>
  64.         <li><p class="text">欢迎来到「博客的文章」，一个小小的赞和留言也是博主最大的动力</p></li>
  65.     </div>
  66. </body>
  67. </html>

四、答疑解惑

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

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

博主VX：18884281851

谢谢各位的支持~~

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/759860
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号