特效描述：利用CSS3實(shí)現(xiàn) 文字滾動(dòng)通知 動(dòng)畫(huà)特效。利用CSS3實(shí)現(xiàn)文字滾動(dòng)通知?jiǎng)赢?huà)特效

代碼結(jié)構(gòu)

1. HTML代碼

.menu-list{list-style:none; width:300px; margin: 100px auto;}

.menu-list li{display:block;}

.list{list-style: none; margin-left: -50px; width:300px; height:60px; overflow:hidden; }

.list li{width: 300px;height: 60px; position: relative; animation: myfirst 4s infinite ;line-height: 60px;text-align: center; font-size: 30px;color:#fff;}

@keyframes myfirst

{

0% {background-color:#4ec7f3; top:0px;}

25% {background-color:#4ec7f3; top:0px;}

50% {background:#42c58a; top:-60px;}

75% {background:#a0a0a0; top:-120px;}

100% {background:#dc143c; top:-180px;}

}

.font30{

font-size: 30px;

color: #7d7d7d;

}

• 今天怎么樣?

• • 還行
  • 該充電
  • 學(xué)習(xí)一下
  • 我想一想

• 要充電了

總結(jié)

以上是生活随笔為你收集整理的html 自动滚动通知,利用CSS3实现文字滚动通知动画特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。