文章詳情頁
html5 - svg如何做到一組動畫循環
瀏覽:104日期: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 - 奇怪的Symbol的問題2. python - 為什么在main()函數里result 會變成那樣?3. javascript - Web微信聊天輸入框解決方案4. angular.js - angular ng-class里面的引號問題5. docker - 如何修改運行中容器的配置6. html - vue項目中用到了elementUI問題7. 網頁爬蟲 - 用Python3的requests庫模擬登陸Bilibili總是提示驗證碼錯誤怎么辦?8. javascript - react 中綁定事件和阻止事件冒泡9. javascript - es6將類數組轉化成數組的問題10. javascript - 有沒有什么好的圖片懶加載的插件,需要包含監聽頁面滾動高度,然后再加載的功能
排行榜
