探究前端的跑马灯效果是如何用css实现的

馆主阿牛 2023-04-13 原文

📋 个人简介

💖 作者简介：大家好，我是阿牛，全栈领域优质创作者😜
📝 个人主页：馆主阿牛🔥
🎉 支持我：点赞👍+收藏⭐️+留言📝
📣 系列专栏：前端实用小demo🍁
💬格言：迄今所有人生都大写着失败，但不妨碍我继续向前！🔥

前言

无意见看到了一个网站的一个动画的跑马灯效果很不错，这篇博客将用css实现跑马灯效果，剖析它是如何实现的！并且我也推荐用css实现这种无缝滚动的跑马灯，效果看起来更平滑，用js定时器实现的会有明显的抖动效果！

最终效果

源码在文末获取!

目标网站效果：

我做出的效果：

当然你要是放一些好看的图片就看起来更好了，这里只是对标我项目需求，没有更换好看的图片！

做法分析

这个效果用css实现很简单，无非就是一个css动画，鼠标移动到上面动画暂停。

这张图显示怎么做很清晰吧！让比较长的小盒子在红色盒子里滚动就行，然后超出这个红色视口盒子就隐藏！

也就是让css动画向左移动蓝色盒子的长度，然后让动画无限循环！

/* 动画 */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-3008px);
    }
}

当然，这里我要重点说的是这个bug，这样做的最终并不是无缝衔接的！

如上图，当一次动画结束，循环进入下一次循环的时候，后面总会有空白，对于这个问题，我们怎样实现无缝衔接滚动呢？

很简单，就是加长滚动的这个绿色盒子，给他加后面几张图片，这几张图片和开始的几张图片相同，至于加几张图片就看你的红色大盒子的长度了，也就是说红色盒子决定你能看到几张图滚动，你就要加几张图作为这个视觉误差！（放到css中，这三张图片的外边距+图片长度=红色盒子的长度，动画滚动的长度依旧不变）

现在原理搞清楚了，以后写这种效果不是很简单，当然，放到我们的实际项目中，肯定是会有一点视觉误差的，因为我们的视口盒子（图中的红色盒子）总是在项目中有固定的长度，你还要做好图片的长度计算，要不要加外边距等等，还是要算一下像素的，最后差一点像素也没关系！但是不能差太多哦！不然后面空白太多了！

至于整个页面的布局，我依旧建议建议使用flex布局，只能说flex确实快捷方便好用，这个布局中还要涉及到定位，浮动+定位的方式也会出现一些莫名的定位问题！

css在这个项目中还有一些:hover

.scroll_box:hover ul{
    /* 当鼠标放在图片上的时候能够暂停动画 */
    animation-play-state:paused;
}
.scroll_box ul li:hover{
    box-shadow: 0 -1px 10px 0 rgb(0 0 0 / 11%); /* 盒子阴影 */
    cursor: pointer;
}

/* 展示作者信息 */
.scroll_box ul li:hover .info{
    display: flex;
}

另外，我项目中用的是bootstrap，因此下面的代码中引入了bootstrap3的css（基本没起作用，大多样式我自己写的，你要不想引入，作者头像的border-radius:50%记得设置）

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>图片走马灯效果</title>
   <link href="../../static/css/bootstrap.min.css" rel="stylesheet">
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    .scroll_box {
        /* 不想看到超出盒子范围的图片，因此需要overflow：hidden；进行隐藏 */
        overflow: hidden;
        width: 1128px;
        height: 340px;
        margin:100px auto;
    }

    .scroll_box ul{
        display: flex;
        margin-top: 10px;
        width: 4136px;
        height: 320px;
        animation: scroll 15s infinite linear;
    }
    .scroll_box ul li {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 320px;
        width: 360px;
        list-style: none;
        margin: 0 8px;
        border-radius: 15px;
    }

    .scroll_box ul li img{
        width: 300px;
    }

    .scroll_box ul li .info{
        display: none;
        align-items: center;
        position: absolute;
        height: 60px;
        width: 330px;
        left: 15px;
        bottom: 15px;
        background-color: rgb(62, 60, 60);
        border-radius: 15px;

    }
    .scroll_box ul li .info img{
        width: 40px;
        margin: 0 25px;
        border: 1px solid #939292;
    }
    .scroll_box ul li .info p{
        margin: 0;
        color: #fff;
    }

    .scroll_box:hover ul{
        /* 当鼠标放在图片上的时候能够暂停动画 */
        animation-play-state:paused;
    }
    .scroll_box ul li:hover{
        box-shadow: 0 -1px 10px 0 rgb(0 0 0 / 11%); /* 盒子阴影 */
        cursor: pointer;
    }
    
    /* 展示作者信息 */
    .scroll_box ul li:hover .info{
        display: flex;
    }

    /* 动画 */
    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-3008px);
        }
    }
</style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="scroll_box">
            <ul>
                <li>
                  <img src="../../static/images/wordcloud/2023-03-17/circle_1a0efbbc-c4b2-11ed-9fea-8cc84b9d23ab.png">
                  <div class="info">
                    <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle"  alt="">
                    <p>作者：<span>阿牛</span></p>
                  </div>
                </li>
                <li>
                  <img src="../../static/images/wordcloud/2023-03-17/heart_1a0efbbc-c4b2-11ed-9fea-8cc84b9d23ab.png">
                  <div class="info">
                    <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle"  alt="">
                    <p>作者：<span>阿牛</span></p>
                  </div>
                </li>
                <li>
                  <img src="../../static/images/wordcloud/2023-03-17/heart_76460c9f-c4dc-11ed-8ac2-8cc84b9d23ab.png">
                  <div class="info">
                    <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle"  alt="">
                    <p>作者：<span>阿牛</span></p>
                  </div>
                </li>
                <li>
                  <img src="../../static/images/wordcloud/2023-03-17/circle_76460c9f-c4dc-11ed-8ac2-8cc84b9d23ab.png">
                  <div class="info">
                    <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle"  alt="">
                    <p>作者：<span>阿牛</span></p>
                  </div>
                </li> 
                <li>
                  <img src="../../static/images/wordcloud/2023-03-17/circle_1a0efbbc-c4b2-11ed-9fea-8cc84b9d23ab.png">
                  <div class="info">
                    <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle"  alt="">
                    <p>作者：<span>阿牛</span></p>
                  </div>
                </li>
                <li>
                  <img src="../../static/images/wordcloud/2023-03-17/heart_1a0efbbc-c4b2-11ed-9fea-8cc84b9d23ab.png">
                  <div class="info">
                    <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle"  alt="">
                    <p>作者：<span>阿牛</span></p>
                  </div>
                </li>
                <li>
                  <img src="../../static/images/wordcloud/2023-03-17/heart_76460c9f-c4dc-11ed-8ac2-8cc84b9d23ab.png">
                  <div class="info">
                    <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle"  alt="">
                    <p>作者：<span>阿牛</span></p>
                  </div>
                </li>
                <li>
                  <img src="../../static/images/wordcloud/2023-03-17/heart_76460c9f-c4dc-11ed-8ac2-8cc84b9d23ab.png">
                  <div class="info">
                    <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle"  alt="">
                    <p>作者：<span>阿牛</span></p>
                  </div>
                </li>
                
                <!-- 用于衔接造成视觉误差的的3张图 -->
                <li>
                  <img src="../../static/images/wordcloud/2023-03-17/circle_1a0efbbc-c4b2-11ed-9fea-8cc84b9d23ab.png">
                  <div class="info">
                    <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle"  alt="">
                    <p>作者：<span>阿牛</span></p>
                  </div>
                </li>
                <li>
                  <img src="../../static/images/wordcloud/2023-03-17/heart_1a0efbbc-c4b2-11ed-9fea-8cc84b9d23ab.png">
                  <div class="info">
                    <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle"  alt="">
                    <p>作者：<span>阿牛</span></p>
                  </div>
                </li>
                <li>
                  <img src="../../static/images/wordcloud/2023-03-17/heart_76460c9f-c4dc-11ed-8ac2-8cc84b9d23ab.png">
                  <div class="info">
                    <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle"  alt="">
                    <p>作者：<span>阿牛</span></p>
                  </div>
                </li>
            </ul>
        </div>
    </div>  
</div>
</body>
</html>

结语

如果你觉得博主写的还不错的话，可以订阅下面的这个flask专栏，这是博主唯一的付费专栏，我做的这个效果也是最近项目的一部分，这个项目也是用flask做的，我会将他全部总结开源到这个flask专栏中。

【flask从入门到实战】专栏9.9火热订阅中，已包含两个项目，全站独一无二的脚手架搭建，直接复制简单无脑操作，项目结构类似Django，感兴趣的可以看看哦！

🏰系列专栏
👉flask框架快速入门

其他专栏请前往博主主页查看！

何用探究 span class token css 前端动画

有关探究前端的跑马灯效果是如何用css实现的的更多相关文章

ruby - capybara field.has_css?匹配器 - 2
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？最佳答案通过JonasNicklas得到了答案:No
ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2
我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden
css - 用 watir 检查标签类？ - 2
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。最佳答案试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2
华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o
基于C#实现简易绘图工具【100010177】 - 2
C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.
MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2
MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO
【Java入门】使用Java实现文件夹的遍历 - 2
遍历文件夹我们通常是使用递归进行操作，这种方式比较简单，也比较容易理解。本文为大家介绍另一种不使用递归的方式，由于没有使用递归，只用到了循环和集合，所以效率更高一些！一、使用递归遍历文件夹整体思路1、使用File封装初始目录，2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组，取出每个File对象4-1、如果File是否是一个文件，打印4-2、否则就是一个目录，递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg
ruby - Arrays Sets 和 SortedSets 在 Ruby 中是如何实现的 - 2
通常，数组被实现为内存块，集合被实现为HashMap，有序集合被实现为跳跃列表。在Ruby中也是如此吗？我正在尝试从性能和内存占用方面评估Ruby中不同容器的使用情况最佳答案数组是Ruby核心库的一部分。每个Ruby实现都有自己的数组实现。Ruby语言规范只规定了Ruby数组的行为，并没有规定任何特定的实现策略。它甚至没有指定任何会强制或至少建议特定实现策略的性能约束。然而，大多数Rubyist对数组的性能特征有一些期望，这会迫使不符合它们的实现变得默默无闻，因为实际上没有人会使用它:插入、前置或追加以及删除元素的最坏情况步骤复
ruby - "public/protected/private"方法是如何实现的，我该如何模拟它？ - 2
在ruby中，你可以这样做:classThingpublicdeff1puts"f1"endprivatedeff2puts"f2"endpublicdeff3puts"f3"endprivatedeff4puts"f4"endend现在f1和f3是公共(public)的，f2和f4是私有(private)的。内部发生了什么，允许您调用一个类方法，然后更改方法定义？我怎样才能实现相同的功能(表面上是创建我自己的java之类的注释)例如...classThingfundeff1puts"hey"endnotfundeff2puts"hey"endendfun和notfun将更改以下函数定
ruby-on-rails - 如何用不同的用户运行nginx主进程 - 2
A/ctohttp://wiki.nginx.org/CoreModule#usermaster进程曾经以root用户运行，是否可以以不同的用户运行nginxmaster进程？最佳答案只需以非root身份运行init脚本(即/etc/init.d/nginxstart)，就可以用不同的用户运行nginxmaster进程。如果这真的是你想要做的，你将需要确保日志和pid目录(通常是/var/log/nginx&/var/run/nginx.pid)对该用户是可写的，并且您所有的listen调用都是针对大于1024的端口(因为绑定(

探究前端的跑马灯效果是如何用css实现的

📋 个人简介

目录

前言

最终效果

做法分析

源码

结语

有关探究前端的跑马灯效果是如何用css实现的的更多相关文章

随机推荐