CSS样式实现js文字滚动轮播

1、新建html文档。

3、书写css代码。body { margin: 0px; font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif; text-align: center; }#container { color: #999; text-transform: uppercase; font-size: 32px; /* font-weight:bold; */padding-top: 200px; position: fixed; width: 100%; bottom: 45%; display: block; }#flip { height: 50px; overflow: hidden; }#flip > div > div { color: #fff; padding: 0 18px; /* line-height: 45px; */height: 45px; margin-bottom: 45px; display: inline-block; }#flip div:first-child { ani mation: show 5s linear infinite; }#flip div div { background: #42c58a; }#flip div:first-child div { background: #4ec7f3; }#flip div:last-child div { background: #DC143C; }

5、代码整体结构。