body { width:640px; height:480px; margin:50px auto; } .box { width:100%; height:100%; background:#0072ff; text-align:center; } .box-1 { display:inline-block; width:320px; height:320px; margin-top:60px; border:15px solid rgba(255,255,255,1); border-radius:50%; box-sizing:border-box; transform:all 2s; } .box-1:before { display:inline-block; width:100%; height:100%; border-radius:50%; box-sizing:border-box; content:""; } .box-1:hover { border:15px solid rgba(255,255,255,0); } .box-1:hover:before { border:dashed 30px #fff; animation:ww 9s linear infinite; } p { margin:-60% auto; width:80%; font-size:50px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:aliceblue; } @keyframes ww { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }