html 自动滚动通知,利用CSS3实现文字滚动通知动画特效

特效描述：利用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;

}

• 今天怎么样?

• • 还行
  • 该充电
  • 学习一下
  • 我想一想

• 要充电了