迎接下一個代碼（兩個圓圈）當滑鼠指標懸停在它上面時它運行，所以圓圈顏色從一個變為另一個。我編輯它，使它現在看起來像風扇或一些旋轉影片，但它仍然需要滑鼠指標才能運行。
我希望找到編輯它的幫助，以便它自動運行，并保持重復（回圈）。
<html>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 100 100" xml:space="preserve">
<defs>
<style>
.another-circle {
stroke-dasharray: 10;
stroke-dashoffset: 500;
transition: stroke-dashoffset 1s linear ;
}
.another-circle:hover {
stroke-dashoffset: 0;
}
</style>
</defs>
<circle cx="50" cy="50" r="36" fill="transparent" stroke="red" stroke-width="4" />
<circle transform="rotate(-90 40 40)" class="another-circle" cx="30" cy="50" r="36" fill="transparent" stroke="blue" stroke-width="60" />
</svg>
</body>
</html>提前致謝
uj5u.com熱心網友回復：
改用影片怎么樣？它將在不懸停或使用 JavaScript 的情況下運行。
我將進行變換/旋轉，而不是為 dasharray (dashoffset) 設定影片。在這種情況下，dasharray 有點棘手，因為它被切斷了。
.another-circle {
stroke-dasharray: 10;
transform-origin: center;
animation: rotateme 1s linear infinite;
}
@keyframes rotateme {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 100 100" xml:space="preserve">
<circle cx="50" cy="50" r="36" fill="none" stroke="red" stroke-width="4" />
<circle class="another-circle" cx="50" cy="50" r="36" fill="none" stroke="blue" stroke-width="60" pathLength="200" />
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/398872.html
標籤：javascript html css svg
上一篇：Dropboxapi上傳檔案