SVG科幻动画轴承圆圈 - 踏得网

SVG circle animation

svg, circle, gear

《使用js把svg图形转成png图像》申请公开！

第三方库
作品简介 7396
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
    
    <circle class="st0" cx="500" cy="500" r="302.8">
        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 500 500" to="360 500 500" dur="100s" repeatCount="indefinite" />
    </circle>
    
    <circle class="st1" cx="500" cy="500" r="237.7">
        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 500 500" to="360 500 500" dur="40s" repeatCount="indefinite" />
    </circle>
    
    <circle class="st2" cx="500" cy="500" r="366.8" transform="rotate(0 500 500)" ;>
        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 500 500" to="-360 500 500" dur="50s" repeatCount="indefinite" />
    </circle>
    
    <circle class="st3" cx="500" cy="500" r="385.1" />
</svg>

<p class="title">SVG轴承动画</p>