2018-02-11

css3实现精灵球

纯css3实现精灵球晃动效果

代码

<html>
    <head>
        <meta name="UTF-8">
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            @keyframes anim{
                0%{transform: rotate(0deg);}
                25%{transform: rotate(30deg);}
                50%{transform: rotate(0deg);}
                75%{transform: rotate(-30deg);}
                100%{transform: rotate(0deg);}
            }
            @keyframes anim2{
                0%{background: white;}
                100%{background: red;}
            }
            div{
                position: relative;
                height: 300px;
                width: 300px;
                border-radius: 150px;
                margin: auto;
                margin-top: 200px;
                background: linear-gradient(red 0%,red 47%,black 47%,black 53%,white 53%,white 100%); 
                box-shadow: 0px 0px 22px  #666;
                animation: anim 3s infinite;
            }
            div:before{
                content: "";
                display: inline-block;
                height: 80px;
                width: 80px;
                background: white;
                border-radius: 40px;
                position: absolute;
                bottom: 110px;
                left: 110px;
                box-shadow: 0px 0px 0px 20px black inset;
                animation: anim2 1s infinite alternate;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>