不知道为啥 编辑器总是把html中的i标签 解析成em标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style>.demo i{display: block; width: 100px; height: 100px; position: absolute; top:50%; left:50%; margin:-50px 0 0 -50px; background: #333; border-radius:50%; opacity: 0} .demo i:nth-child(1){-webkit-animation:demo-1 1.5s linear 0s infinite;} .demo i:nth-child(2){-webkit-animation:demo-1 1.5s linear 0.4s infinite;} .demo i:nth-child(3){-webkit-animation:demo-1 1.5s linear 0.8s infinite;} @-webkit-keyframes demo-1{ 0%{ transform:scale(0); opacity:0; } 5%{ opacity: 1; } 100%{ transform:scale(1); opacity: 0; } }</style> </head> <body> <div class="demo"> <em></em> <em></em> <em></em> </div> </body> </html>