body {

    font-family: Avenir, 'Helvetica Neue', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;

}

​

.pokeball {

    transition:transform 1s;

    border-radius:100px;

    width: 200px;

    height: 200px;

    overflow: hidden;

    background: black;

    background-image: repeating-linear-gradient(-45deg,rgba(255,255,255,.9),rgba(255,255,255,1));

    box-shadow: 0 0 3px black;

    position: fixed;

  margin:auto;

  top:0;bottom:0;left:0;right:0

}

​

    .pokeball::before {

        content: "";

        position: absolute;

        height: 50%;

        width: 100%;

        display: block;

        background: red;

        background-image: repeating-linear-gradient(-45deg,rgba(255,255,255,.3),rgba(255,255,255,.5));

        box-shadow: 0 0 1px 1px #666;

    }

​

    .pokeball::after {

        content: "";

        position: absolute;

        height: 25%;

        width: 25%;

        background: white;

        border: 2px solid #666666;

        box-sizing: border-box;

        position: absolute;

        top: 0;

        bottom: 0;

        left: 0;

        right: 0;

        margin: auto;

        border-radius: 100px;

        z-index: 1;

        background: black;

        background-image: repeating-linear-gradient(-45deg,rgba(255,255,255,.95),rgba(255,255,255,1));

        box-shadow: 0px 0px 0px 13px #f2f2f2,0px 0px 2px 15px #666;

    }

​

    .pokeball:hover {      

      transform:rotate(360deg);

    }

.pokeball:hover::after{

​

}