<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ font-size:12px; margin:0;padding:0; } #box{ width:300px; height: 300px; margin:100px auto; border:1px solid #ccc; transition: all 0.3s; -webkit-transition: all 0.3s; } .inner-box{ width:60px; height: 30px; margin:100px auto; border:1px solid #ccc; transition: all 0.3s; -webkit-transition: all 0.3s; } @-webkit-keyframes myfirst /* Safari 和 Chrome */ { from{transform:rotate(0deg);} to {transform:rotate(360deg);} } #box:hover{ border-radius: 50%; background:#007aff; box-shadow: 5px 10px 10px rgba(0,0,0,.3); -webkit-animation: myfirst 3s; -webkit-animation-iteration-count:3; -webkit-animation-direction:alternate; } </style> </head> <body> <div id="box"> <div class="inner-box"></div> <div class="inner-box"></div> </div> </body> </html>