小阀门

马黑黑

马黑黑

代码

1. <svg id="msvg" width="200" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 200 200">
   
2.         <symbol id="sb" viewBox="-100 -100 200 200">
   
3.                 <circle cx="0" cy="0" r="40" fill="none" stroke="green" stroke-width="5"></circle>
   
4.                 <path d="M0 0, 60 0" fill="none" stroke="green" stroke-width="5"></path>
   
5.                 <path d="M0 0, 60 0" fill="none" stroke="green" stroke-width="5" transform="rotate(120.00, 0 0)"></path>
   
6.                 <path d="M0 0, 60 0" fill="none" stroke="green" stroke-width="5" transform="rotate(240.00, 0 0)"></path>
   
7.         </symbol>
   
8.         <use href="#sb" x="-100" y="-100" width="100" height="100"></use>
   
9.         <use href="#sb" x="-100" y="-100" width="100" height="100" transform="rotate(60.00, 0 0)"></use>
   
10.         <use href="#sb" x="-100" y="-100" width="100" height="100" transform="rotate(120.00, 0 0)"></use>
    
11.         <use href="#sb" x="-100" y="-100" width="100" height="100" transform="rotate(180.00, 0 0)"></use>
    
12.         <use href="#sb" x="-100" y="-100" width="100" height="100" transform="rotate(240.00, 0 0)"></use>
    
13.         <use href="#sb" x="-100" y="-100" width="100" height="100" transform="rotate(300.00, 0 0)"></use>
    
14.         <use href="#sb" x="-50" y="-50" width="100" height="100"></use>
    
15.         <style>
    
16.                 #sb { transform-origin: 50px 50px; animation: rot 6s linear infinite; }
    
17.                 @keyframes rot { to { transform: rotate(360deg); } }
    
18.         </style>
    
19. </svg>

复制代码

红影

这么多的小阀门真好看

马黑黑

红影 发表于 2026-4-28 23:41
这么多的小阀门真好看

好吧，就叫小阀门