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

1、新建html文档。

2、书写hmtl代码。

<div id="container">

  简单几招，让 

  <div id="flip">

    <div><div>第一个dDIV！</div></div>

    <div><div>生ASDASD好！</div></div>

    <div><div>心  畅！</div></div>

  </div>

  一起来吧！

</div>

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; }

4、书写css3特效代码。

 @keyframes show {  0% {

margin-top:-270px;

}

 5% {

margin-top:-180px;

}

 33% {

margin-top:-180px;

}

 38% {

margin-top:-90px;

}

 66% {

margin-top:-90px;

}

 71% {

margin-top:0px;

}

 99.99% {

margin-top:0px;

}

 100% {

margin-top:-270px;

}

}

5、代码整体结构。

6、查看效果。