從中心到外部填充樹

我想我的手在SVG上，我做了這個 link。現在我想知道如何在背景中從中心到外部填充樹。目前，它只是消失在這裏是動畫代碼：。從中心到外部填充樹

  .st0 { 
       fill:#22a8d5; 
       fill-opacity: 0; 
       animation-timing-function: ease-in-out; 
       animation-fill-mode: forwards; 
       animation-iteration: 1; 
       animation-name: fillup; 
       animation-duration: 4s; 
       animation-delay: 4s; 

      } 
      @-webkit-keyframes fillup { 
       from { fill-opacity: 0; } 
       to { fill-opacity: 1; } 
      }

我都試過，但我只是不能得到它的工作，這在任何幻燈片或淡出

來源

2017-07-02 KnightHood

使用矩形創建剪輯路徑，剪切十字，隨着時間增長矩形。 –

兩種可能的方法：

將樹變成<clipPath>，然後用它來剪裁一個圓形，其半徑隨着時間的推移而變化。
使用<radialGradient>作爲樹的fill。然後隨着時間的推移漸變的半徑動畫。

您可以使用純CSS實現的第一種方法，只要您使用transform來增加圓圈。動畫圈子的r屬性目前僅適用於Chrome。

第二種方法只能通過Chrome上的純CSS實現。如果您需要跨瀏覽器支持，則需要使用SVG <animate>元素或Javascript來執行動畫。

來源

2017-07-03 10:48:35

謝謝。我採取了第二種方法 – KnightHood

你能告訴我如何在交叉完成後開始動畫？ – KnightHood

這取決於你用什麼方法來做動畫。 –

從中心到外部填充樹

回答

相關問題