html5 svg图标旋转菜单特效

http://www.17sucai.com/pins/2991

<style>
    *, *:before, *:after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    :root {
        font-size: calc(16px + (20 - 16) * (100vw - 320px)/(980 - 320));
        --rotateTimes: 0;
    }
    .advantage  ul,.advantage  li {
        transform-style: preserve-3d;
    }

    .advantage   li {
        position: absolute;
        top: 50%;
        left: 50%;
    }

  .advantage   li a {
        border-radius: 50%;
    }

    .animation_box   ul,  .animation_box li a {
        width: 100%;
        height: 100%;
    }

    .animation_box   ul {
        list-style: none;
    }

    .animation_box li {
        animation: idle 4s ease-in-out infinite;
        text-align: center;
        transform: translate(-50%, -50%);
    }
    .animation_box  li:hover{
       animation: idle 40000s ease-in-out infinite;
        text-align: center;
        transform: translate(-50%, -50%);
    }
    
    .animation_box   li a {
        box-shadow: 0 0 0 0.1em #0cf inset, 0 0 1em #0cf inset;
        color: currentColor;
        display: inline-block;
        text-decoration: none;
        transition: transform 0.4s linear,  box-shadow 0.15s linear,  margin 0.1s linear,  width 0.1s linear,  height 0.1s linear;
    }
    .animation_box li a span {
        transition: color 0.15s linear;
    }
    .animation_box  li a:before {
        background-color: #fff;
        border-radius: 50%;
        content: "";
        display: block;
        opacity: 0.5;
        position: absolute;
        top: 0.75em;
        left: 0.75em;
        width: 1em;
        height: 0.5em;
        transform: rotate(-45deg);
    }
    .animation_box li a:focus, li a.current {
        box-shadow: 0 0 0 0.1em #ff0 inset, 0 0 1em #ff0 inset;
        outline: 0;
    }
    .animation_box li a:focus span, li a.current span {
        color: #ff0;
    }
    .animation_box   li a:hover {
        margin: -5% 0 0 -5%;
        width: 110%;
        height: 110%;
    }
    .animation_box li a:hover svg {
        width: 3em;
        height: 3em;
    }

    @media (prefers-reduced-motion) {
        .animation_box  li {
            animation: none;
        }
    }
    svg {
        display: block;
        margin: 1.25em auto 1.5em auto;
        transition: width 0.1s linear, height 0.1s linear;
        width: 2.5em;
        height: 2.5em;
    }
   

    /* Position bubbles */
  .animation_box  li:nth-of-type(1) {
        animation-delay: 0s;
    }
    .animation_box  li:nth-of-type(1){
        left: 160px;
        top: 120px;
        transform: rotate(calc(0deg + var(--rotateTimes) * 51.4285714286deg)) translateY(9em) rotate(calc(0deg - var(--rotateTimes) * 51.4285714286deg)) rotateX(-75deg);
    }

    .animation_box  li:nth-of-type(2) {
        right: -96px;
        top:  120px;
        left: inherit;
        animation-delay: -0.5s;
    }
    .animation_box  li:nth-of-type(2){
        transform: rotate(calc(-51.4285714286deg + var(--rotateTimes) * 51.4285714286deg)) translateY(9em) rotate(calc(51.4285714286deg - var(--rotateTimes) * 51.4285714286deg)) rotateX(-75deg);
    }

    .animation_box  li:nth-of-type(3) {
        top: 400px;
        left: 280px;
        animation-delay: -1s;
    }
    .animation_box  li:nth-of-type(3){
        transform: rotate(calc(-102.8571428571deg + var(--rotateTimes) * 51.4285714286deg)) translateY(9em) rotate(calc(102.8571428571deg - var(--rotateTimes) * 51.4285714286deg)) rotateX(-75deg);
    }

    .animation_box   li:nth-of-type(4) {
  top: 400px;
  right: -30px;
  left: inherit;
  animation-delay: -1.5s;
    }
    .animation_box  li:nth-of-type(4){
        transform: rotate(calc(-154.2857142857deg + var(--rotateTimes) * 51.4285714286deg)) translateY(9em) rotate(calc(154.2857142857deg - var(--rotateTimes) * 51.4285714286deg)) rotateX(-75deg);
    }

    .animation_box  li:nth-of-type(5) {
   top: 520px;
   left: 650px;
   animation-delay: -2s;
    }
    .animation_box  li:nth-of-type(5){
        font-family: arial;
        transform: rotate(calc(-205.7142857143deg + var(--rotateTimes) * 51.4285714286deg)) translateY(9em) rotate(calc(205.7142857143deg - var(--rotateTimes) * 51.4285714286deg)) rotateX(-75deg);
    }
    @keyframes idle {
        from, to {
            transform: translate(-50%, -48%);
        }
        25% {
            transform: translate(-52%, -50%);
        }
        50% {
            transform: translate(-50%, -52%);
        }
        75% {
            transform: translate(-48%, -50%);
        }
    }
</style>

4.html