CSS 实战罗盘转动效果

演示代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="reset.css"/>
        <style type="text/css">
            #lp{
                width: 500px;height: 500px;border-radius: 50%;
                margin: 50px auto;
                position: relative;
                overflow: hidden;
            }
            #lp img{
                width: 500px;height: 500px;
                position: absolute;top: 0;left: 0;
            }
            #lp01{
                animation: lpzdshun 40s linear infinite;
            }
            #lp02{
                animation: lpzdni 30s linear infinite;
            }
            #lp03{
                animation: lpzdshun 20s linear infinite;
            }
            #lp04{
                animation: lpzdni 10s linear infinite;
            }
            @keyframes lpzdshun{
                0%{transform: rotateZ(0deg);}
                100%{transform: rotateZ(180deg);}
            }
            @keyframes lpzdni{
                0%{transform: rotateZ(0deg);}
                100%{transform: rotateZ(-180deg);}
            }
        </style>
    </head>
    <body>
        <div id="lp">
            <img id="lp01" src="lp01.png" >
            <img id="lp02" src="lp02.png" >
            <img id="lp03" src="lp03.png" >
            <img id="lp04" src="lp04.png" >
        </div>
    </body>
</html>