<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0 ;padding:0;} .con{margin:20px auto;width:500px;text-align:center} .con span{ /* font-size:100px; -webkit-text-fill-color: white; -webkit-text-stroke-color: red; -webkit-text-stroke- 2px; text-stroke-color: red; text-stroke- 2px;*/ -webkit-text-fill-color:#fff; -webkit-text-stroke: 1px #333; font-size:30px; font-family:"microsoft yahei"; letter-spacing:20px; } span{ -webkit-animation:anima 2s linear infinite; } @-webkit-keyframes anima{ 0%{-webkit-transform:translate(0,0);} 20%{-webkit-transform:translate(0,-14px);} 25%{-webkit-transform:translate(0,-15px);} 30%{-webkit-transform:translate(0,-14px);} 50%{-webkit-transform:translate(0,0px);} 60%{-webkit-transform:translate(0,14px);} 70%{-webkit-transform:translate(0,15px);} 80%{-webkit-transform:translate(0,14px);} 100%{-webkit-transform:translate(0,0);} } .span1{-webkit-animation-delay:0s;} .span2{-webkit-animation-delay:0.3s;} .span3{-webkit-animation-delay:0.6s;} .span4{-webkit-animation-delay:0.9s;} </style> </head> <body> <div class="con"> <span class="span1">我</span> <span class="span2">是</span> <span class="span3">好</span> <span class="span4">人</span> </div> </body> </html>