adobe dreamweaver
书写hmtl代码。
书写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; }
书写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;}}
代码整体结构。
查看效果。