詳解微信小程序?qū)崿F(xiàn)跑馬燈效果(附完整代碼)
在微信小程序 里實(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代碼:
/*首頁跑馬燈效果*/ @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; /*過渡時(shí)間*/ animation-iteration-count: infinite; animation-timing-function:linear; } /*首頁跑馬燈效果*/
以上所述是小編給大家介紹的微信小程序跑馬燈效果詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JS實(shí)現(xiàn)HTML頁面中動(dòng)態(tài)顯示當(dāng)前時(shí)間完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)HTML頁面中動(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-07javascript getElementById 使用方法及用法
顧明思義,get-Element-By-Id,就是通過ID來設(shè)置/返回HTML標(biāo)簽的屬性及調(diào)用其事件與方法。用這個(gè)方法基本上可以控制頁面所有標(biāo)簽,條件很簡(jiǎn)單就是給每個(gè)標(biāo)簽分配一個(gè)ID號(hào)2008-11-11微信小程序修改swiper默認(rèn)指示器樣式的實(shí)例代碼
這篇文章主要介紹了微信小程序修改swiper默認(rèn)指示器樣式的實(shí)例代碼,代碼塊是從微信開發(fā)文檔中心復(fù)制的代碼塊,在此基礎(chǔ)上修改官方swiper樣式,需要的朋友可以參考下2018-07-07JavaScript使用Math.random()生成簡(jiǎn)單的驗(yàn)證碼
今天小編就為大家分享一篇關(guān)于JavaScript使用Math.random()生成簡(jiǎn)單的驗(yàn)證碼,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2019-01-01微信小程序開發(fā)之實(shí)現(xiàn)別踩白塊游戲
這篇文章主要為大家詳細(xì)介紹了如何通過微信小程序開發(fā)一個(gè)簡(jiǎn)單的別踩白塊游戲,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以和小編一起學(xué)習(xí)一下2023-02-02