小程式文字上下滾動輪播效果實現CSS

1- 這是一句話

2- 這是一句話

3- 這是一句話

4- 這是一句話

5- 這是一句話

6- 這是一句話

7- 這是一句話

8- 這是一句話

9- 這是一句話

10- 這是一句話

11- 這是一句話

@-webkit-keyframes rowup {

0% {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

100% {

-webkit-transform: translate3d(0, -307px, 0);

transform: translate3d(0, -307px, 0);

@keyframes rowup {

0% {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

100% {

-webkit-transform: translate3d(0, -307px, 0);

transform: translate3d(0, -307px, 0);

.demo-list{

width: 300px;

border: 1px solid #999;

margin: 20px auto;

position: relative;

height: 200px;

overflow: hidden;

.demo-list .rowup{

-webkit-animation: 10s rowup linear infinite normal;

animation: 10s rowup linear infinite normal;

position: relative;

參考：

跑馬燈效果 文字上下滾動效果

void vieddidload裡面 void change陣列中的內容僅供測試用，具體內容可以通過後台伺服器獲取或者寫死 資料條數可以改變，我寫的是3條 if a 2 3 0 if a 3 3 0 類似下圖效果，文字滾動，左邊還有個小喇叭 動態更換可以使用uiimageview 自帶的方法進行設定...

微信小程式 文字跑馬燈

效果 1 顯示完後再顯示view class example class marquee box class marquee text style px font size px view view view 2 出現白邊後即顯示view class example class marquee bo...

初識微信小程式 文字樣式設定

文字樣式設定 文字屬可以定義文字的外觀。通過設定文字屬性，可以 改變文字的顏色 字元間距，對齊文字，裝飾文字，對文字 進行縮排，等等。north china university of technology ncut is located in the western part of beijing...