前端小案例——走马灯（文字水平轮播, 附源码）
花花´◡` 2024-06-15 08:33:02 阅读 62
一、前言
实现功能：
水平滚动的文本效果，可以通俗的来说也叫“走马灯”，这里博主用了两种方法实现。
第一种是用gsap动画库完成的，这种方法更为简单也更为高效。
第二种使用CSS动画完成的，这是一种常见的方式对于对gsap动画不熟悉的小伙伴，也可以参考这种方法。
两种方式博主都提供了源码供大家参考学习。
实现逻辑
1. gsap动画库
在HTML头部引入GSAP动画库的JS文件。使用CSS样式进行美化，设置了背景颜色、圆角等属性。添加SVG格式的音频图标。使用GSAP库创建一个滚动动画效果，选择class为"one"的元素，并将其向左移动390像素，持续时间为10秒，使用Linear缓动函数（即匀速运动），并设置重复次数为无限次。2. CSS动画
创建一个包含滚动消息框的div元素，并设置样式类名为sound。使用CSS样式进行美化，设置了背景颜色、圆角等属性。添加SVG格式的音频图标。在li元素中添加一个p元素，设置初始文本内容并设置样式类名为text。使用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
谢谢各位的支持~~
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。