svg齿轮小案例

svg齿轮转动案例

css代码：

 .st0{fill:#050101;}
        .st1{fill:none;stroke:#000000;stroke-miterlimit:10;}
        .st2{fill:#8E9890;stroke:#000000;stroke-miterlimit:10;}
        .st3{fill:#050101;stroke:#000000;stroke-miterlimit:10;}
        .st4{fill:#FAFAFA;stroke:#000000;stroke-miterlimit:10;}
        #one{
            width:200px;
            margin: 0 auto;
        }
        #tow{
            width:200px;
            margin-left: 463px;
            float:left;
            margin-top: -60px;
        }
        #three{
            width:200px;
            margin-right: 461px;
            float:right;
            margin-top: -62px;
        }

html代码：

<div id="one">
    <svg version="1.1" x="0px" y="0px" width="200" viewBox="0 0 75.7 72.6" style="enable-background:new 0 0 75.7 72.6;" xml:space="preserve">
<g id="XMLID_11_">
    <g id="XMLID_29_">
        <path id="XMLID_30_" class="st0" d="M65.2,36.9l7.7-2.4l-1.6-9.3l-8.1,0.6c-1-2.3-2.3-4.4-3.8-6.4l4.4-6.9l-7.2-6.1l-5.9,5.8
            c-2.1-1.1-4.4-1.9-6.9-2.4l-1.1-8.2h-9.5l-0.8,8.4c-2.3,0.6-4.6,1.4-6.6,2.5l-6.3-5.7L12.1,13l4.9,7.1c-1.4,1.8-2.5,3.9-3.4,6.1
            L5,25.8l-1.6,9.3l8.4,2.3c0.1,2.4,0.5,4.6,1.2,6.8l-6.8,5.3l4.7,8.2l7.9-3.6c1.6,1.7,3.4,3.2,5.4,4.5L22.3,67l8.9,3.2l3.7-7.6
            c1.2,0.2,2.4,0.3,3.7,0.3c1.2,0,2.4-0.1,3.5-0.2l3.9,7.4l8.9-3.2l-2.1-8c2.1-1.3,4-2.9,5.6-4.7l7.5,3.1l4.7-8.2l-6.6-4.7
            C64.7,41.9,65.1,39.5,65.2,36.9z"/>
    </g>
    <g id="XMLID_25_">
        <path id="XMLID_26_" class="st1" d="M65.2,36.9l7.7-2.4l-1.6-9.3l-8.1,0.6c-1-2.3-2.3-4.4-3.8-6.4l4.4-6.9l-7.2-6.1l-5.9,5.8
            c-2.1-1.1-4.4-1.9-6.9-2.4l-1.1-8.2h-9.5l-0.8,8.4c-2.3,0.6-4.6,1.4-6.6,2.5l-6.3-5.7L12.1,13l4.9,7.1c-1.4,1.8-2.5,3.9-3.4,6.1
            L5,25.8l-1.6,9.3l8.4,2.3c0.1,2.4,0.5,4.6,1.2,6.8l-6.8,5.3l4.7,8.2l7.9-3.6c1.6,1.7,3.4,3.2,5.4,4.5L22.3,67l8.9,3.2l3.7-7.6
            c1.2,0.2,2.4,0.3,3.7,0.3c1.2,0,2.4-0.1,3.5-0.2l3.9,7.4l8.9-3.2l-2.1-8c2.1-1.3,4-2.9,5.6-4.7l7.5,3.1l4.7-8.2l-6.6-4.7
            C64.7,41.9,65.1,39.5,65.2,36.9z"/>
    </g>
    <circle id="XMLID_14_" class="st2" cx="38.5" cy="36.1" r="23"/>
<circle id="XMLID_15_" class="st3" cx="38.5" cy="36.1" r="12.8"/>
<circle id="XMLID_16_" class="st4" cx="38.5" cy="36.1" r="10.5"/>
     <animateTransform
                attributeName="transform"
                type="rotate"
                from="0 37.85 36.3"
                to="360 37.85 36.3"
                begin="0s"
                dur="5s"
                repeatCount="indefinite"
                />
</g>

</svg>
</div>
<div id="tow">
    <svg version="1.1" x="0px" y="0px" width="200" viewBox="0 0 75.7 72.6" style="enable-background:new 0 0 75.7 72.6;" xml:space="preserve">
<g id="XMLID_11_">
    <g id="XMLID_29_">
        <path id="XMLID_30_" class="st0" d="M65.2,36.9l7.7-2.4l-1.6-9.3l-8.1,0.6c-1-2.3-2.3-4.4-3.8-6.4l4.4-6.9l-7.2-6.1l-5.9,5.8
            c-2.1-1.1-4.4-1.9-6.9-2.4l-1.1-8.2h-9.5l-0.8,8.4c-2.3,0.6-4.6,1.4-6.6,2.5l-6.3-5.7L12.1,13l4.9,7.1c-1.4,1.8-2.5,3.9-3.4,6.1
            L5,25.8l-1.6,9.3l8.4,2.3c0.1,2.4,0.5,4.6,1.2,6.8l-6.8,5.3l4.7,8.2l7.9-3.6c1.6,1.7,3.4,3.2,5.4,4.5L22.3,67l8.9,3.2l3.7-7.6
            c1.2,0.2,2.4,0.3,3.7,0.3c1.2,0,2.4-0.1,3.5-0.2l3.9,7.4l8.9-3.2l-2.1-8c2.1-1.3,4-2.9,5.6-4.7l7.5,3.1l4.7-8.2l-6.6-4.7
            C64.7,41.9,65.1,39.5,65.2,36.9z"/>
    </g>
    <g id="XMLID_25_">
        <path id="XMLID_26_" class="st1" d="M65.2,36.9l7.7-2.4l-1.6-9.3l-8.1,0.6c-1-2.3-2.3-4.4-3.8-6.4l4.4-6.9l-7.2-6.1l-5.9,5.8
            c-2.1-1.1-4.4-1.9-6.9-2.4l-1.1-8.2h-9.5l-0.8,8.4c-2.3,0.6-4.6,1.4-6.6,2.5l-6.3-5.7L12.1,13l4.9,7.1c-1.4,1.8-2.5,3.9-3.4,6.1
            L5,25.8l-1.6,9.3l8.4,2.3c0.1,2.4,0.5,4.6,1.2,6.8l-6.8,5.3l4.7,8.2l7.9-3.6c1.6,1.7,3.4,3.2,5.4,4.5L22.3,67l8.9,3.2l3.7-7.6
            c1.2,0.2,2.4,0.3,3.7,0.3c1.2,0,2.4-0.1,3.5-0.2l3.9,7.4l8.9-3.2l-2.1-8c2.1-1.3,4-2.9,5.6-4.7l7.5,3.1l4.7-8.2l-6.6-4.7
            C64.7,41.9,65.1,39.5,65.2,36.9z"/>
    </g>
    <circle id="XMLID_14_" class="st2" cx="38.5" cy="36.1" r="23"/>
<circle id="XMLID_15_" class="st3" cx="38.5" cy="36.1" r="12.8"/>
<circle id="XMLID_16_" class="st4" cx="38.5" cy="36.1" r="10.5"/>
     <animateTransform
                attributeName="transform"
                type="rotate"
                from="0 37.85 36.3"
                to="-360 37.85 36.3"
                begin="0s"
                dur="5s"
                repeatCount="indefinite"
                />
</g>

</svg>
</div>
<div id="three">
    <svg version="1.1" x="0px" y="0px" width="200" viewBox="0 0 75.7 72.6" style="enable-background:new 0 0 75.7 72.6;" xml:space="preserve">
<g id="XMLID_11_">
    <g id="XMLID_29_">
        <path id="XMLID_30_" class="st0" d="M65.2,36.9l7.7-2.4l-1.6-9.3l-8.1,0.6c-1-2.3-2.3-4.4-3.8-6.4l4.4-6.9l-7.2-6.1l-5.9,5.8
            c-2.1-1.1-4.4-1.9-6.9-2.4l-1.1-8.2h-9.5l-0.8,8.4c-2.3,0.6-4.6,1.4-6.6,2.5l-6.3-5.7L12.1,13l4.9,7.1c-1.4,1.8-2.5,3.9-3.4,6.1
            L5,25.8l-1.6,9.3l8.4,2.3c0.1,2.4,0.5,4.6,1.2,6.8l-6.8,5.3l4.7,8.2l7.9-3.6c1.6,1.7,3.4,3.2,5.4,4.5L22.3,67l8.9,3.2l3.7-7.6
            c1.2,0.2,2.4,0.3,3.7,0.3c1.2,0,2.4-0.1,3.5-0.2l3.9,7.4l8.9-3.2l-2.1-8c2.1-1.3,4-2.9,5.6-4.7l7.5,3.1l4.7-8.2l-6.6-4.7
            C64.7,41.9,65.1,39.5,65.2,36.9z"/>
    </g>
    <g id="XMLID_25_">
        <path id="XMLID_26_" class="st1" d="M65.2,36.9l7.7-2.4l-1.6-9.3l-8.1,0.6c-1-2.3-2.3-4.4-3.8-6.4l4.4-6.9l-7.2-6.1l-5.9,5.8
            c-2.1-1.1-4.4-1.9-6.9-2.4l-1.1-8.2h-9.5l-0.8,8.4c-2.3,0.6-4.6,1.4-6.6,2.5l-6.3-5.7L12.1,13l4.9,7.1c-1.4,1.8-2.5,3.9-3.4,6.1
            L5,25.8l-1.6,9.3l8.4,2.3c0.1,2.4,0.5,4.6,1.2,6.8l-6.8,5.3l4.7,8.2l7.9-3.6c1.6,1.7,3.4,3.2,5.4,4.5L22.3,67l8.9,3.2l3.7-7.6
            c1.2,0.2,2.4,0.3,3.7,0.3c1.2,0,2.4-0.1,3.5-0.2l3.9,7.4l8.9-3.2l-2.1-8c2.1-1.3,4-2.9,5.6-4.7l7.5,3.1l4.7-8.2l-6.6-4.7
            C64.7,41.9,65.1,39.5,65.2,36.9z"/>
    </g>
    <circle id="XMLID_14_" class="st2" cx="38.5" cy="36.1" r="23"/>
<circle id="XMLID_15_" class="st3" cx="38.5" cy="36.1" r="12.8"/>
<circle id="XMLID_16_" class="st4" cx="38.5" cy="36.1" r="10.5"/>
    <animateTransform
                attributeName="transform"
                type="rotate"
                from="0 37.85 36.3"
                to="-360 37.85 36.3"
                begin="0s"
                dur="5s"
                repeatCount="indefinite"
                />
</g>

</svg>
</div>

接下来就看看我们的效果吧：

是不是特别漂亮呢！要是觉得漂亮的的话那就点歌赞呗！