特效描述：利用CSS3實現 文字滾動通知 動畫特效。利用CSS3實現文字滾動通知動畫特效

代碼結構

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;

}

• 今天怎么樣?

• • 還行
  • 該充電
  • 學習一下
  • 我想一想

• 要充電了

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。