小故事情况
事儿是那样的，卤煮不经意间获知一款外放实际效果宇宙空间超级第一的手机上！！！脑壳一热就借着阿东618大促搞了一台，终究卤煮是一个正宗的电子器件发热友！！！可是当卤煮查寻货运物流信息内容的情况下。。。。。。
行吧，我这该死的探寻欲，被这生硬的跑马灯吸引住住了眼光（ca，今日看模样是收不上货了！！！）
那么就说说如何完成它吧（这一梗接的便是那么硬）
实际效果图
逻辑性叙述
p标识包括俩span标识(提醒的文本)，要2个span，或是两个之上，p标识精准定位，更改p标识left值开展健身运动，健身运动到第一个span标识的末尾处，看图！！！当第二个span抵达起止部位时，循环系统第二次健身运动，恰好会无缝拼接对接上。
不管PC還是手机端，自然了，跑马灯毫无疑问手机端出現占多数。按设计方案稿来，UI会让你span标识文本的实际总宽，那麼：健身运动间距=span总宽+2个span中间的留白艺术-左侧鲜红色地区的left值
编码完成
html一部分：
<div id="app">
<div class="top">
<p>
<span class="tips">因为大促期内定单量猛增，您的定单送到时效性将会出現延迟时间，请您细心等候~</span>
<span>因为大促期内定单量猛增，您的定单送到时效性将会出現延迟时间，请您细心等候~</span>
</p>
</div>
<div class="main">
<h6>随后这儿放的便是卤煮</h6>
<h4>外放称得上手机上圈</h4>
<h2>宇宙空间超级第一</h2>
<h6>小米手机10 Pro</h6>
<h2>wo不接纳争论</h2>
<h3>·</h3>
<h3>·</h3>
<h3>·</h3>
<h3>·</h3>
</div>
</div>
css一部分：
.tips{
width: 560px;
}
p{
position: absolute;
height: 34px;
left: 34px;
white-space: nowrap;
display: flex;
animation: move linear 12s infinite;
animation-delay:3s;
}
@keyframes move {
0%{ left: 34px; }
100%{ left: -526px; }
}
/* 这儿下列请忽视，关键在上边 */
*{margin: 0; padding: 0;}
body,html{height: 100%;}
#app{
height: 100%;
background:#ececec;
margin: 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-index: 9;
background-image: linear-gradient(90deg,#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 browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
咳咳~考虑到到英文不太好的朋友，汉语翻译一下便是： 原素早已落伍，请不必再应用。虽然一些访问器依然适用它，但它并不是务必的。另外，应用这一原素大部分就是你能够对你的客户做最不尽人意的事儿之一，因此请不必那样做。
因此，挑选卤煮的吧。这些！当显示屏总宽得以学会放下提醒语的情况下应当不锻炼身体，这一点用js来操纵，就作为课下工作吧！
到此这篇有关css3完成文本首尾对接跑马灯的实例编码的文章内容就详细介绍到这了,大量有关css3文本首尾对接跑马灯內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！
Copyright © 2002-2020 如何制作微信小程序_微信小程序源码_小程序码生成_凡科网微信小程序_微信公众号小程序 版权所有 （网站地图） 粤ICP备10235580号