svg 文件中星星的旋转动画
Spin animation for stars in svg file
我有一个 svg 文件,我想让星星像转子一样旋转。
我的代码如下:
.my-spin {
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
<svg enable-background="new 0 0 951.7 589.2" version="1.1" viewBox="0 0 951.7 589.2" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<circle cx="567.1" cy="162.1" r="7.4" fill="#fff"/>
<polygon class="my-spin" points="567 156.1 568.7 159.6 572.6 160.2 569.8 162.9 570.5 166.8 567 165 563.5 166.8 564.2 162.9 561.4 160.2 565.3 159.6" fill="#F70606"/>
<circle cx="694.4" cy="189.4" r="7.1" fill="#fff"/>
<polygon class="my-spin" points="694.3 183.6 696 187 699.7 187.5 697 190.2 697.7 193.9 694.3 192.1 690.9 193.9 691.6 190.2 688.9 187.5 692.6 187" fill="#F70606" stroke="#E20000" stroke-miterlimit="10" stroke-width=".6338"/>
<circle cx="522.1" cy="302.7" r="7.8" fill="#fff"/>
<polygon class="my-spin" points="522 296.2 523.9 300 528 300.6 525 303.5 525.7 307.6 522 305.7 518.4 307.6 519.1 303.5 516.1 300.6 520.2 300" fill="#F70606"/>
<circle cx="644.8" cy="381.5" r="6.8" fill="#fff"/>
<polygon class="my-spin" points="644.7 375.8 646.3 379.1 649.9 379.6 647.3 382.2 647.9 385.8 644.7 384.1 641.5 385.8 642.1 382.2 639.5 379.6 643.1 379.1" fill="#F70606"/>
<circle cx="346.5" cy="274.1" r="7.8" fill="#fff"/>
</svg>
我尝试了一些链接,但它仍然无法正常工作。
CSS3 Spin Animation
https://codepen.io/teerapuch/pen/vLJXeR
https://flaviocopes.com/css-animations/
如何让星星像螺旋桨一样转动
谢谢大家
您需要将 transform-box: fill-box;
应用到 .my-spin
class。
.my-spin {
transform-box: fill-box;
animation: spin 2s linear infinite;
transform-origin:50% 50%;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
<svg enable-background="new 0 0 951.7 589.2" version="1.1" viewBox="0 0 951.7 589.2" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<circle cx="567.1" cy="162.1" r="7.4" fill="#fff"/>
<polygon class="my-spin" points="567 156.1 568.7 159.6 572.6 160.2 569.8 162.9 570.5 166.8 567 165 563.5 166.8 564.2 162.9 561.4 160.2 565.3 159.6" fill="#F70606"/>
<circle cx="694.4" cy="189.4" r="7.1" fill="#fff"/>
<polygon class="my-spin" points="694.3 183.6 696 187 699.7 187.5 697 190.2 697.7 193.9 694.3 192.1 690.9 193.9 691.6 190.2 688.9 187.5 692.6 187" fill="#F70606" stroke="#E20000" stroke-miterlimit="10" stroke-width=".6338"/>
<circle cx="522.1" cy="302.7" r="7.8" fill="#fff"/>
<polygon class="my-spin" points="522 296.2 523.9 300 528 300.6 525 303.5 525.7 307.6 522 305.7 518.4 307.6 519.1 303.5 516.1 300.6 520.2 300" fill="#F70606"/>
<circle cx="644.8" cy="381.5" r="6.8" fill="#fff"/>
<polygon class="my-spin" points="644.7 375.8 646.3 379.1 649.9 379.6 647.3 382.2 647.9 385.8 644.7 384.1 641.5 385.8 642.1 382.2 639.5 379.6 643.1 379.1" fill="#F70606"/>
<circle cx="346.5" cy="274.1" r="7.8" fill="#fff"/>
</svg>
我有一个 svg 文件,我想让星星像转子一样旋转。 我的代码如下:
.my-spin {
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
<svg enable-background="new 0 0 951.7 589.2" version="1.1" viewBox="0 0 951.7 589.2" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<circle cx="567.1" cy="162.1" r="7.4" fill="#fff"/>
<polygon class="my-spin" points="567 156.1 568.7 159.6 572.6 160.2 569.8 162.9 570.5 166.8 567 165 563.5 166.8 564.2 162.9 561.4 160.2 565.3 159.6" fill="#F70606"/>
<circle cx="694.4" cy="189.4" r="7.1" fill="#fff"/>
<polygon class="my-spin" points="694.3 183.6 696 187 699.7 187.5 697 190.2 697.7 193.9 694.3 192.1 690.9 193.9 691.6 190.2 688.9 187.5 692.6 187" fill="#F70606" stroke="#E20000" stroke-miterlimit="10" stroke-width=".6338"/>
<circle cx="522.1" cy="302.7" r="7.8" fill="#fff"/>
<polygon class="my-spin" points="522 296.2 523.9 300 528 300.6 525 303.5 525.7 307.6 522 305.7 518.4 307.6 519.1 303.5 516.1 300.6 520.2 300" fill="#F70606"/>
<circle cx="644.8" cy="381.5" r="6.8" fill="#fff"/>
<polygon class="my-spin" points="644.7 375.8 646.3 379.1 649.9 379.6 647.3 382.2 647.9 385.8 644.7 384.1 641.5 385.8 642.1 382.2 639.5 379.6 643.1 379.1" fill="#F70606"/>
<circle cx="346.5" cy="274.1" r="7.8" fill="#fff"/>
</svg>
我尝试了一些链接,但它仍然无法正常工作。
CSS3 Spin Animation
https://codepen.io/teerapuch/pen/vLJXeR
https://flaviocopes.com/css-animations/
如何让星星像螺旋桨一样转动
谢谢大家
您需要将 transform-box: fill-box;
应用到 .my-spin
class。
.my-spin {
transform-box: fill-box;
animation: spin 2s linear infinite;
transform-origin:50% 50%;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
<svg enable-background="new 0 0 951.7 589.2" version="1.1" viewBox="0 0 951.7 589.2" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<circle cx="567.1" cy="162.1" r="7.4" fill="#fff"/>
<polygon class="my-spin" points="567 156.1 568.7 159.6 572.6 160.2 569.8 162.9 570.5 166.8 567 165 563.5 166.8 564.2 162.9 561.4 160.2 565.3 159.6" fill="#F70606"/>
<circle cx="694.4" cy="189.4" r="7.1" fill="#fff"/>
<polygon class="my-spin" points="694.3 183.6 696 187 699.7 187.5 697 190.2 697.7 193.9 694.3 192.1 690.9 193.9 691.6 190.2 688.9 187.5 692.6 187" fill="#F70606" stroke="#E20000" stroke-miterlimit="10" stroke-width=".6338"/>
<circle cx="522.1" cy="302.7" r="7.8" fill="#fff"/>
<polygon class="my-spin" points="522 296.2 523.9 300 528 300.6 525 303.5 525.7 307.6 522 305.7 518.4 307.6 519.1 303.5 516.1 300.6 520.2 300" fill="#F70606"/>
<circle cx="644.8" cy="381.5" r="6.8" fill="#fff"/>
<polygon class="my-spin" points="644.7 375.8 646.3 379.1 649.9 379.6 647.3 382.2 647.9 385.8 644.7 384.1 641.5 385.8 642.1 382.2 639.5 379.6 643.1 379.1" fill="#F70606"/>
<circle cx="346.5" cy="274.1" r="7.8" fill="#fff"/>
</svg>