博客 / 列表

waker - css animation配合SVG製作能量流動效果

最終效果如下: 動畫分成兩步 制定運行軌跡 創建DOM並按照軌跡動畫 制定運行軌跡 我們先要畫一條底部的淡藍色半透明路勁做為能量流動的管道 這裏用SVG的path去做(其實這裏可以直接用背景圖), 代碼如下: !-- 代碼是用react寫的, 刪除了遍歷以及部分代碼 -- svg !-- 工具描述提示符,被用在fill裏做過濾等操作,這裏是小球底部的發光 -- de

css3 , svg動畫 , 前端