<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no"/> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } body,html{ height: 100%; overflow: hidden; } #wrap{ height: 100%; position: relative; } #wrap > .inner{ text-align: center; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); /*设置不回车*/ white-space: nowrap; } #wrap > .inner > span{ /*如果是absolute就会提升一层，都会重叠在一块了因为变成了浮动元素*/ position:relative; } @keyframes move{ from{top: 0;} to{top: -10px;} } </style> </head> <body> <div id="wrap"> <div class="inner"> <span>中</span> <span>华</span> <span>人</span> <span>民</span> <span>共</span> <span>和</span> <span>国</span> <span>共</span> <span>产</span> <span>党</span> <span>万</span> <span>岁</span> </div> </div> </body> <script src="../2D变换/js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ var colors = ["red","orange","yellow","green","blue","pink","red","orange","yellow","green","blue","pink"] $span = $("#wrap > .inner > span"); $span.each(function(i){ $(this).css("animation","move .3s "+(i*50)+"ms infinite alternate") $(this).css("color",colors[i]) }) }) </script> </html>