<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding:0; } body{ background:#006d5c; } .outer{ position: relative; width:150px; height:150px; margin:80px auto; border-radius: 50%; background:#fff; cursor: pointer; transition:all 1s } .outer ul{ list-style: none; position: absolute; top:-75px; left:-75px; border-radius:50%; border: 150px solid transparent; z-index: -1; transform:scale(0); transition: transform 1.4s 0.07s; } .outer li{ position: absolute; top: -100px; left: -100px; transform-origin: 100px 100px; transition: all 0.5s 0.1s; } a{ text-decoration: none; color:#02c67c; width: 45px; height: 45px; line-height: 45px; border-radius: 50%; background: #fff; position: absolute; font-size: 14px; transition: 0.6s; text-align: center; } .outer:hover ul{ transition: transform 0.4s 0.08s, z-index 0s 0.5s; transform: scale(1); z-index: 1; } .outer:hover li{ transition:all 0.6s } .outer:hover li:nth-child(1){ transition-delay:0.02s; transform:rotate(90deg); } .outer:hover li:nth-child(1) a{ transition-delay:0.04s; transform:rotate(270deg); } .outer:hover li:nth-child(2){ transition-delay:0.04s; transform:rotate(125deg); } .outer:hover li:nth-child(2) a{ transition-delay:0.08s; transform:rotate(595deg); } .outer:hover li:nth-child(3){ transition-delay:0.06s; transform:rotate(165deg); } .outer:hover li:nth-child(3) a{ transition-delay:0.12s; transform:rotate(555deg); } .outer:hover li:nth-child(4){ transition-delay:0.08s; transform:rotate(205deg); } .outer:hover li:nth-child(4) a{ transition-delay:0.16s; transform:rotate(515deg); } .outer:hover li:nth-child(5){ transition-delay:0.1s; transform:rotate(245deg); } .outer:hover li:nth-child(5) a{ transition-delay:0.2s; transform:rotate(475deg); } .outer:hover li:nth-child(6){ transition-delay:0.12s; transform:rotate(285deg); } .outer:hover li:nth-child(6) a{ transition-delay:0.24s; transform:rotate(435deg); } .outer:hover li:nth-child(7){ transition-delay:0.14s; transform:rotate(325deg); } .outer:hover li:nth-child(7) a{ transition-delay:0.28s; transform:rotate(395deg); } .outer:hover li:nth-child(8){ transition-delay:0.16s; transform:rotate(365deg); } .outer:hover li:nth-child(8) a{ transition-delay:0.32s; transform:rotate(355deg); } .outer:hover li:nth-child(9){ transition-delay:0.18s; transform:rotate(405deg); } .outer:hover li:nth-child(9) a{ transition-delay:0.36s; transform:rotate(315deg); } </style> </head> <body> <div class="outer"> <ul> <li> <a href="javascript:void (0);">1</a> </li> <li> <a href="javascript:void (0);">2</a> </li> <li> <a href="javascript:void (0);">3</a> </li> <li> <a href="javascript:void (0);">4</a> </li> <li> <a href="javascript:void (0);">5</a> </li> <li> <a href="javascript:void (0);">6</a> </li> <li> <a href="javascript:void (0);">7</a> </li> <li> <a href="javascript:void (0);">8</a> </li> <li> <a href="javascript:void (0);">9</a> </li> </ul> </div> </body> </html>