故事背景
事情是这样的，卤煮无意间得知一款外放效果宇宙无敌第一的手机！！！脑袋一热就趁着阿东618大促搞了一台，毕竟卤煮是一个地道的 电 子发烧友！！！但是当卤煮查询物流信息的时候。。。。。。
好吧，我这该死的 探索 欲，被这突兀的跑马灯吸引住了目光（ca，今天看样子是收不到货了！！！）
那就说说怎么实现它吧（这个梗接的就是这么硬）
效果图
逻辑描述
p标签 包含俩 span标签 (提示的文字)，要两个span， 或者 2个以上，p标签定位， 改变 p标签left值进行运动，运动到第一个span标签的结尾处，看图！！！当第二个span到达起始位置时，循环第二次运动，刚好会无缝衔接上。
无论PC还是移动端，当然了，走马灯肯定移动端出现居多。按设计稿来，UI会给你span标签文字的具体 宽 度，那么：运动 距离 =span宽度+两个span之间的留白-左边 红色 区域的left值
代码实现
ht ML 部分：
<div id="app">
<div class="top">
<p>
<span class="tips">由于大促期间订单量激增，您的订单送达时效可能出现延迟，请您耐心等待~</span>
<span>由于大促期间订单量激增，您的订单送达时效可能出现延迟，请您耐心等待~</span>
</p>
</div>
<div class=" ;m ai n">
<h6>然后这里放的就是卤煮</h6>
<h4>外放堪称手机圈</h4>
<h2>宇宙无敌第一</h2>
<h6> 小米 10 PR o</h6>
<h2>wo不接受争辩</h2>
<h3>·</h3>
<h3>·</h3>
<h3>·</h3>
<h3>·</h3>
</div>
</div>
css部分：
.tips{
width: 560px;
}
p{
pos IT ion: absolute;
h ei ght: 34px;
left: 34px;
white -s pace: nowra p;
dis play : flex;
animation: move linear 12s infinite;
animation-delay:3s;
}
@keyfr am es move {
0%{ left: 34px; }
100%{ left: -526px; }
}
/* 这里以下请忽略，重点在上面 */
*{m arg in: 0; padding: 0;}
body,html{height: 100%;}
# app{
height: 100%;
background:#ececec;
mar gin : 0 auto;
display: flex;
flex-direction: column;
}
.main{
flex: 1;
}
.top{
position: relative;
overflow: hidden;
height: 34px;
background: #fff;
}
.top span{
line-height: 34px;
display: inline-block;
}
.top :: before{
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 34px;
z -i ndex: 9;
background-image: linear-gra die nt(90 deg ,#f00 0%, #f00 60%, transparent 100%);
}
.top: :after {
content: "";
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 34px;
z-index: 9;
background-image: linear-gradient(-90deg,#f00 0%, #f00 60%, transparent 100%);
}
h1 ,h2,h3,h4,h5,h6{
margin: 20px auto;
text-align: center ;
}
个人总结
卤煮在项目中有涉及到跑马灯，而且卤煮项目中用的是一个比较偷懒的方法，就是 利用 marquee标签，这个就 自带 跑马灯效果好嘛！！！这个标签很强大，一个标签即可解决你写一大堆css或者js，那我绕这么一大圈干嘛？
首先，它不能实现我这种首尾衔接！！！
其次，官网关于这个标签的描述是这样的：This feature is obsolete. Although it may still work in some br owsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
咳咳~考虑到英语不好的童鞋， 翻译 一下就是： 元素已经过时，请不要再使用。尽管一些浏览器仍然支持它，但它不是必须的。此外，使用这个元素基本上是你可以对你的用户做最糟糕的事情之一，所以请不要这样做。
所以，选择卤煮的吧。 等等 ！当屏幕宽度足以放下提示语的时候 应该 不做运动，这 一点 用js来控制，就当作课下作业吧！
到此这篇关于css3实现文字首尾衔接跑马灯的示例代码的 文章 就介绍到这了,更多相关css3文字首尾衔接跑马灯内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 css3实现文字首尾衔接跑马灯的示例代码 全部内容，希望文章能够帮你解决 css3实现文字首尾衔接跑马灯的示例代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于css3实现文字首尾衔接跑马灯的示例代码的详细内容...