SVG 漸變動畫效果
漸變動畫和其他普通動畫原理是一樣的,之所以單獨介紹,是因為很多朋友習慣實現座標或者尺寸改變類似的動畫,而忽略了漸變動畫效果。
關於動畫的更多內容可以參閱SVG animation動畫詳解一章節。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0px; padding: 0px; } svg { border:1px solid blue; margin:50px; } </style> </head> <body> <svg width="300" height="300" > <radialGradient id="gr-radial" cx="50%" cy="50%" r="70%"> <animate attributeName="r" values="0%;150%;100%;0%" dur="5s" repeatCount="indefinite" /> <stop stop-color="#FFF" offset="0"> <animate attributeName="stop-color" values=\"#333;#FFF;#FFF;#333" dur="5s" repeatCount="indefinite" /> </stop> <stop stop-color="rgba(55,55,55,0)" offset="100%" /> </radialGradient> <circle cx="50%" cy="50%" r="50%" fill="url(#gr-radial)"/> </svg> </body> </html>
漸變動畫和其他動畫並無二致,關於漸變效果可以參閱下面兩篇文章:
(1).線性漸變參閱SVG <linearGradient>線性漸變一章節。
(2).徑向漸變參閱SVG <radialGradient>徑向漸變一章節。
相關文章
- jQuery背景色漸變動畫效果jQuery動畫
- 仿噹噹App首頁按鈕漸變動畫效果APP動畫
- 手把手使用 SVG + CSS 實現漸變進度環效果SVGCSS
- SVG animateTransform變換動畫SVGORM動畫
- js滑鼠懸浮連結背景動畫方式漸變效果JS動畫
- SVG線性漸變程式碼SVG
- iOS文字漸變效果iOS
- SVG <radialGradient> 徑向漸變SVG
- SVG實現動態模糊動畫效果SVG動畫
- SVG 實現動態模糊動畫效果SVG動畫
- jquery實現的元素以動畫方式移動和漸變效果jQuery動畫
- SVG <linearGradient> 線性漸變SVG
- div css背景漸變效果CSS
- svg實現矩形水平運動動畫效果SVG動畫
- svg在line直線上應用漸變SVG
- canvas具有漸變效果的矩形Canvas
- JavaScript透明度漸變效果JavaScript
- CSS透明度漸變效果CSS
- 使用 CSS 實現漸變效果CSS
- SVG 動畫SVG動畫
- CSS和SVG實現文字漸變、描邊、投影CSSSVG
- SVG動畫應用-酷炫的圖片展示效果SVG動畫
- SVG 動畫實現彈性的頁面元素效果SVG動畫
- canvas簡單動畫案例(圓圈閃爍漸變動畫)Canvas動畫
- Android 顏色漸變 屬性動畫Android動畫
- 【譯】React Native中的動畫漸變React Native動畫
- 【Android動畫】之Tween動畫 (漸變、縮放、位移、旋轉)Android動畫
- SVG animation 動畫SVG動畫
- javascript網頁背景顏色漸變效果JavaScript網頁
- CSS背景色漸變效果程式碼CSS
- 為app實現漸變的遮罩效果APP遮罩
- css樣式背景顏色漸變效果CSS
- 指令碼和css控制!文字漸變效果!指令碼CSS
- Dreamweaver製作滑鼠經過圖片漸漸變暗效果教程
- svg和css3建立環形漸變進度條SVGCSSS3
- UI設計師SVG動畫進階篇——路徑變形動畫(下篇)UISVG動畫
- UI設計師SVG動畫進階篇——路徑變形動畫(中篇)UISVG動畫
- iOS 背景圖層的顏色漸變效果iOS