svg齿轮小案例

￡神魔★判官ぃ 2021-10-01 04:00 304阅读 0赞

**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>

> 接下来就看看我们的效果吧：  
> ![1162901-20170630170119618-1135695685.gif][]  
> 是不是特别漂亮呢！要是觉得漂亮的的话那就点歌赞呗！

转载于:https://www.cnblogs.com/STsongze/p/7099721.html

[1162901-20170630170119618-1135695685.gif]: /images/20210724/4aef42f585364aa2a18ef295d4f2a061.png

发表评论取消回复

表情：

评论列表（有 0 条评论，304人围观）

还没有评论，来说两句吧...

相关阅读

相关 svg mysql_SVG介绍

SVG介绍 SVG是指可缩放矢量图(Scalable Vector Graphics)。SVG使用XML格式来定义图形。SVG可以直接嵌入到HTML页面中。位图和矢量图

柔情只为你懂/ 2022年10月26日 12:58/ 0 赞/ 220 阅读

相关 SVG

[使用SVG + CSS实现动态霓虹灯文字效果][SVG _ CSS] 早上无意间进入一个网站，看到他们的LOGO效果略屌，如图：刚开始以为是gif动画之类的，审查元素

迷南。/ 2022年06月03日 00:49/ 0 赞/ 310 阅读

相关【SVG】SVG快速入门

前言 SVG 指可缩放矢量图形，是用于描述二维矢量图形的一种图形格式。SVG 中预定了七种形状元素，分别是： 1. 矩形 2. 圆形 3. 椭圆形 4. 线段

- 日理万妓/ 2022年06月02日 07:20/ 0 赞/ 367 阅读

相关 SVG_SVG动画案例

尊重原创，欢迎转载，转载请注明： FROM GA\_studio [http://blog.csdn.net/tianjian4592][http_blog.

柔情只为你懂/ 2022年05月24日 05:57/ 0 赞/ 363 阅读

相关【svg】svg动画

如果你之前没有接触过svg，可以看下这个简略图：[ https://www.processon.com/view/link/5ae205a2e4b0411f64d1f65a][

àì夳堔傛蜴生んèń/ 2022年05月18日 07:51/ 0 赞/ 322 阅读

相关 SVG

俗话说得好：最好的学习方法是兴趣引导的学习，在学习SVG之前，先给你们看看一些实例，让你们领略一下SVG的强大，看看能不能激发出你们的学习兴趣。 [https://www.

喜欢ヅ旅行/ 2022年05月03日 03:58/ 0 赞/ 413 阅读

相关 Vue - Loading 齿轮组件

当在[V][]ue项目，当向后台请求接口时，常常会使用 loding 过渡数据的加载时间。如果 loading 作为一个全局的加载状态，应该写在项目中的App.vue中

左手的ㄟ右手/ 2022年03月16日 16:46/ 0 赞/ 191 阅读

相关 SVG

可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准

Love The Way You Lie/ 2021年11月10日 06:32/ 0 赞/ 342 阅读

相关 svg齿轮小案例

svg齿轮转动案例 > css代码： .st0{fill:050101;} .st1{fill:none;stroke:000000;str

￡神魔★判官ぃ/ 2021年10月01日 04:00/ 0 赞/ 305 阅读

相关 svg 圈线圈案例

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

本是古典何须时尚/ 2021年07月24日 19:09/ 0 赞/ 301 阅读