如何讓所有這些 svg 粉絲移動？https://jsfiddle.net/xvpn653t/
這就是我想要做的，移動 svg 粉絲。
我怎樣才能讓他們都動起來？
這就是我想要做的。
我如何讓他們每個人都旋轉？
我只能讓一個風扇移動。
.fan.fan2.fan3.fan4.fan5.fan6 svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
margin: auto;
animation: fan-spin 4s linear;
animation-iteration-count: 4;
}
.fan.fan2.fan3.fan4.fan5.fan6 svg {
animation-iteration-count: 4;
}
@keyframes fan-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}<div class="fan fan2 fan3 fan4 fan5 fan6">
<svg width="50px" height="50px" viewBox="76 130 381 381">
<g id="fan">
<path fill="#000" stroke="#000" d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" />
</g>
</svg>
</div>
<div class="fan fan2">
<svg width="50px" height="50px" viewBox="76 130 381 381">
<use href="#fan" />
</svg></div>
<div class="fan fan3">
<svg width="50px" height="50px" viewBox="76 130 381 381">
<use href="#fan" />
</svg></div>
<div class="fan fan4 ">
<svg width="50px" height="50px" viewBox="76 130 381 381">
<use href="#fan" />
</svg></div>
<div class="fan fan5">
<svg width="50px" height="50px" viewBox="76 130 381 381">
<use href="#fan" />
</svg></div>
<div class="fan fan6">
<svg width="50px" height="50px" viewBox="76 130 381 381">
<use href="#fan" />
</svg></div>uj5u.com熱心網友回復：
由于每個容器都有.fan類名，因此您只需將影片應用于SVG包含該類的容器：
.fan.fan1 svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
margin: auto;
/* don't need this
animation: fan-spin 4s linear;
animation-iteration-count: 4;
}
.fan.fan2.fan3.fan4.fan5.fan6 svg {
animation-iteration-count: 4;
*/
}
/* added */
.fan svg
{
animation: fan-spin 4s linear;
animation-iteration-count: 4;
}
@keyframes fan-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}<div class="fan fan1">
<svg width="50px" height="50px" viewBox="76 130 381 381">
<g id="fan">
<path fill="#000" stroke="#000" d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" />
</g>
</svg>
</div>
<div class="fan fan2">
<svg width="50px" height="50px" viewBox="76 130 381 381">
<use href="#fan" />
</svg></div>
<div class="fan fan3">
<svg width="50px" height="50px" viewBox="76 130 381 381">
<use href="#fan" />
</svg></div>
<div class="fan fan4 ">
<svg width="50px" height="50px" viewBox="76 130 381 381">
<use href="#fan" />
</svg></div>
<div class="fan fan5">
<svg width="50px" height="50px" viewBox="76 130 381 381">
<use href="#fan" />
</svg></div>
<div class="fan fan6">
<svg width="50px" height="50px" viewBox="76 130 381 381">
<use href="#fan" />
</svg></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/529258.html
標籤：htmlcss动画svg