文章詳情頁
html5 - svg如何做到一組動畫循環
瀏覽:86日期:2023-01-29 15:27:39
問題描述
問題解答
回答1:如果只是單純的改變寬度,少年可以這樣實現
<svg> <rect x=’20’ y=’20’ width=’250’ height=’250’ fill=’blue’><animate animateType='css' attributeName='width' values='250;0;250' dur='3s' repeatCount='indefinite'/> </rect></svg>回答2:
給animate添加id后,使用begin來指定動畫開始的時間為另一個的結束。
不清楚有沒有更好的辦法。
<svg> <rect x='20' y='20' fill='blue'><animate attributeType='CSS' attributeName='width' begin='0s; second.end' from='250' to='0' dur='1s'></animate><animate attributeType='CSS' attributeName='width' begin='first.end' from='0' to='250' dur='1s'></animate> </rect></svg>
標簽:
Html5
相關文章:
1. javascript - js 有什么優雅的辦法實現在同時打開的兩個標簽頁間相互通信?2. css3 - Typecho 后臺部分表單按鈕在 Chrome 下出現靈異動畫問題,求解決3. java - 新手做一個安卓視頻播放器,想實現一個進度條,按鈕那種在視頻下方懸浮的功能,不知道思路!4. javascript - jquery怎么給select option一個點擊時觸發的事件,如圖 如果選擇自定義觸發一個時間?5. nginx配置server模塊的問題6. java - android代碼重構:如何把app設置里的頭像UI做成通用的?7. node.js - express請求的具體方法8. javascript - angular和jquery都用到了$符號,一起用會不會沖突?9. 想找個php大神仿個網站。10. javascript - 怎樣限制同一個瀏覽器不能登錄兩個賬號
排行榜
