公告

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> <svg version="1.1" x="0px" y="0px" viewBox="0 0 75.7 72.6" xml:space="preserve"> <g> <g> <path 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> <path 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 cx="38.5" cy="36.1" r="23"/> <circle cx="38.5" cy="36.1" r="12.8"/> <circle 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> <svg version="1.1" x="0px" y="0px" viewBox="0 0 75.7 72.6" xml:space="preserve"> <g> <g> <path 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> <path 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 cx="38.5" cy="36.1" r="23"/> <circle cx="38.5" cy="36.1" r="12.8"/> <circle 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> <svg version="1.1" x="0px" y="0px" viewBox="0 0 75.7 72.6" xml:space="preserve"> <g> <g> <path 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> <path 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 cx="38.5" cy="36.1" r="23"/> <circle cx="38.5" cy="36.1" r="12.8"/> <circle 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>

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

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

posted on