css3 小球转动动画

效果图:小球沿着圆圈进行转动,利用css3的animation特性

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
                background-color: red;
            }
            #box{
                width: 200px;
                height: 200px;
                margin: 200px auto;
                border-radius: 50%;
                border:2px solid white;
                position: relative;
                animation: run 3s ease infinite;
            }
            #box::before{
                content: "";
                display: block;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                position: absolute;
                background-color: white;
                left: 90px;
                margin-top: -10px;
                
            }
            @keyframes run{
                from{
                    transform: rotate(0deg);
                }
                to{
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <body style="position: relative;">
            <div id="box"></div>
        
    </body>
</html>

相关文章: