詳解微信小程序?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)跑馬燈效果，類(lèi)似滾動(dòng)字幕或者滾動(dòng)廣告之類(lèi)的，使用簡(jiǎn)單的CSS樣式控制，沒(méi)用到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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
JS實(shí)現(xiàn)HTML頁(yè)面中動(dòng)態(tài)顯示當(dāng)前時(shí)間完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)HTML頁(yè)面中動(dòng)態(tài)顯示當(dāng)前時(shí)間,結(jié)合完整實(shí)例形式分析了JavaScript使用時(shí)間函數(shù)setTimeout及clearTimeout動(dòng)態(tài)顯示當(dāng)前時(shí)間相關(guān)操作技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2018-07-07
javascript getElementById 使用方法及用法
顧明思義，get-Element-By-Id，就是通過(guò)ID來(lái)設(shè)置/返回HTML標(biāo)簽的屬性及調(diào)用其事件與方法。用這個(gè)方法基本上可以控制頁(yè)面所有標(biāo)簽，條件很簡(jiǎn)單就是給每個(gè)標(biāo)簽分配一個(gè)ID號(hào)2008-11-11
微信小程序?qū)崿F(xiàn)tab頁(yè)面切換功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)tab頁(yè)面切換功能,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細(xì)介紹了原生JS寫(xiě)一個(gè)環(huán)形的鼠標(biāo)滑動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
騰訊位置服務(wù)為微信小程序提供了基礎(chǔ)的標(biāo)點(diǎn)能力、線和圓的繪制接口等地圖組件和位置展示、地圖選點(diǎn)等地圖API位置服務(wù)能力支持,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)快速精確定位的相關(guān)資料,需要的朋友可以參考下2023-06-06
微信小程序修改swiper默認(rèn)指示器樣式的實(shí)例代碼
這篇文章主要介紹了微信小程序修改swiper默認(rèn)指示器樣式的實(shí)例代碼,代碼塊是從微信開(kāi)發(fā)文檔中心復(fù)制的代碼塊，在此基礎(chǔ)上修改官方swiper樣式，需要的朋友可以參考下2018-07-07
JavaScript使用Math.random()生成簡(jiǎn)單的驗(yàn)證碼
今天小編就為大家分享一篇關(guān)于JavaScript使用Math.random()生成簡(jiǎn)單的驗(yàn)證碼，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
這篇文章主要介紹了JS實(shí)現(xiàn)快遞單打印功能,給大家介紹了js網(wǎng)頁(yè)打印的幾種方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
這篇文章主要是對(duì)JS事件在IE與FF中的區(qū)別進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
微信小程序開(kāi)發(fā)之實(shí)現(xiàn)別踩白塊游戲
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)微信小程序開(kāi)發(fā)一個(gè)簡(jiǎn)單的別踩白塊游戲，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以和小編一起學(xué)習(xí)一下2023-02-02