css3實現(xiàn)文字首尾銜接跑馬燈的示例代碼
我要評論故事背景
事情是這樣的，鹵煮無意間得知一款外放效果宇宙無敵第一的手機?。?！腦袋一熱就趁著阿東618大促搞了一臺，畢竟鹵煮是一個地道的電子發(fā)燒友?。?！但是當(dāng)鹵煮查詢物流信息的時候。。。。。。
好吧，我這該死的探索欲，被這突兀的跑馬燈吸引住了目光（ca，今天看樣子是收不到貨了?。。。?/p>
那就說說怎么實現(xiàn)它吧（這個梗接的就是這么硬）
效果圖
邏輯描述
p標(biāo)簽包含倆span標(biāo)簽(提示的文字)，要兩個span，或者2個以上，p標(biāo)簽定位，改變p標(biāo)簽left值進(jìn)行運動，運動到第一個span標(biāo)簽的結(jié)尾處，看圖！??！當(dāng)?shù)诙€span到達(dá)起始位置時，循環(huán)第二次運動，剛好會無縫銜接上。
無論PC還是移動端，當(dāng)然了，走馬燈肯定移動端出現(xiàn)居多。按設(shè)計稿來，UI會給你span標(biāo)簽文字的具體寬度，那么：運動距離=span寬度+兩個span之間的留白-左邊紅色區(qū)域的left值
代碼實現(xiàn)
html部分：
<div id="app">
<div class="top">
<p>
<span class="tips">由于大促期間訂單量激增，您的訂單送達(dá)時效可能出現(xiàn)延遲，請您耐心等待~</span>
<span>由于大促期間訂單量激增，您的訂單送達(dá)時效可能出現(xiàn)延遲，請您耐心等待~</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;
}
個人總結(jié)
鹵煮在項目中有涉及到跑馬燈，而且鹵煮項目中用的是一個比較偷懶的方法，就是利用marquee標(biāo)簽，這個就自帶跑馬燈效果好嘛?。?！這個標(biāo)簽很強大，一個標(biāo)簽即可解決你寫一大堆css或者js，那我繞這么一大圈干嘛？
首先，它不能實現(xiàn)我這種首尾銜接?。。?/p>
其次，官網(wǎng)關(guān)于這個標(biāo)簽的描述是這樣的：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.
咳咳~考慮到英語不好的童鞋，翻譯一下就是： 元素已經(jīng)過時，請不要再使用。盡管一些瀏覽器仍然支持它，但它不是必須的。此外，使用這個元素基本上是你可以對你的用戶做最糟糕的事情之一，所以請不要這樣做。
所以，選擇鹵煮的吧。等等！當(dāng)屏幕寬度足以放下提示語的時候應(yīng)該不做運動，這一點用js來控制，就當(dāng)作課下作業(yè)吧！
到此這篇關(guān)于css3實現(xiàn)文字首尾銜接跑馬燈的示例代碼的文章就介紹到這了,更多相關(guān)css3文字首尾銜接跑馬燈內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
結(jié)合 CSS3 transition transform 實現(xiàn)簡單的跑馬燈效果的示例
這篇文章主要介紹了結(jié)合 CSS3 transition transform 實現(xiàn)簡單的跑馬燈效果的示例的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看2018-02-07
