詳解微信小程序?qū)崿F(xiàn)跑馬燈效果（附完整代碼）
更新時(shí)間：2019年04月29日 09:11:45 作者：林羽凡
這篇文章主要介紹了微信小程序跑馬燈效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
在微信小程序 里實(shí)現(xiàn)跑馬燈效果，類似滾動(dòng)字幕或者滾動(dòng)廣告之類的，使用簡(jiǎn)單的CSS樣式控制，沒用到JS，效果如下圖：
Wxml代碼：
<!--跑馬燈 Linyufan.com--> <view class="marquee_container" style="--marqueeWidth--:-12em"> <view class="marquee_text">一個(gè)人活著就是為了讓更多的人更好的活著！</view> </view> <!--跑馬燈-->
Wxss代碼：
/*首頁(yè)跑馬燈效果*/
@keyframes around {
from {
margin-left: 100%;
}
to {
/* var接受傳入的變量 */
margin-left: var(--marqueeWidth--);
}
}
.marquee_container{
background-color: #fe4655;
height: 50rpx;
line-height: 44rpx;
position: relative;
width: 100%;
margin-top:0rpx;
}
.marquee_container:hover{
/* 不起作用 */
animation-play-state: paused;
}
.marquee_text{
color:#fff;
font-size: 28rpx;
display: inline-block;
white-space: nowrap;
animation-name: around;
animation-duration: 10s; /*過(guò)渡時(shí)間*/
animation-iteration-count: infinite;
animation-timing-function:linear;
}
/*首頁(yè)跑馬燈效果*/
以上所述是小編給大家介紹的微信小程序跑馬燈效果詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開發(fā)更加快捷。本文給大家介紹Bootstrap 頁(yè)面排版樣式的相關(guān)知識(shí)，希望對(duì)大家有所幫助！2016-04-04
JavaScript實(shí)現(xiàn)登錄滑塊驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)登錄滑塊驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
javascript獲取所有同類checkbox選項(xiàng)(實(shí)例代碼)
javascript獲取所有同類checkbox選項(xiàng)的簡(jiǎn)單實(shí)例。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
對(duì)layer彈出框中icon數(shù)字參數(shù)的說(shuō)明介紹
今天小編就為大家分享一篇對(duì)layer彈出框中icon數(shù)字參數(shù)的說(shuō)明介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
詳解axios中封裝使用、攔截特定請(qǐng)求、判斷所有請(qǐng)求加載完畢）
這篇文章主要介紹了axios中封裝使用、攔截特定請(qǐng)求、判斷所有請(qǐng)求加載完畢的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
這篇文章主要給大家介紹了關(guān)于uniapp表單校驗(yàn)的相關(guān)資料,Uni-app內(nèi)置了一些表單驗(yàn)證方法,可以幫助我們對(duì)表單進(jìn)行有效的驗(yàn)證,需要的朋友可以參考下2023-10-10
這篇文章主要向大家詳細(xì)介紹了javascript函數(shù)表達(dá)式，幫助大家理解javascript函數(shù)表達(dá)式，感興趣的朋友可以參考一下2016-02-02
淺談如何優(yōu)雅處理JavaScript異步錯(cuò)誤
這篇文章主要介紹了淺談如何優(yōu)雅處理JavaScript異步錯(cuò)誤，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要是對(duì)js中arguments的用法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
漸進(jìn)式Web應(yīng)用是一種結(jié)合了網(wǎng)頁(yè)和原生移動(dòng)應(yīng)用（Native App）優(yōu)點(diǎn)的新型應(yīng)用開發(fā)模式,這篇文章給大家介紹JS加密解密之保存到桌面書簽的操作方法,感興趣的朋友跟隨小編一起看看吧2024-03-03