SVG波浪動畫

今天來試試用svg+css3製做波浪動畫

下圖是我製做出的效果

還不錯吧

在製做波浪前，首先咱們要畫波浪啊，至於畫波浪，若是你想直接經過計算貝塞爾曲線繪製出波浪。。。

好吧，那我也不攔着你

我就直接用ai的鋼筆工具畫了

爲了畫出如出一轍的曲線但是花了我很多功夫

可是光滑曲線仍是不行的，必需要畫出一個以曲線爲頂的「矩形」

像這樣：

本人畫工不敢恭維，湊合着看吧

畢竟以前沒畫過

導出svg文件再用文本編輯器打開就有路徑了

 

 1 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="600px" height="300px">
 2         <defs>
 3             <g id="whole" fill-opacity="0.3" fill="cornflowerblue">
 5                 <path id="wave1" d="M0,200c50-50,99,0,99,0c51,50,101,0,101,0c50-50,100,0,100,0c50,50,100,0,100,0c50-50,100,0,100,0
 6             c50,50,100,0,100,0v200H0V200z"></path>
 7                 <path id="wave2" d="M0,200c50-50,99,0,99,0c51,50,101,0,101,0c50-50,100,0,100,0c50,50,100,0,100,0c50-50,100,0,100,0
 8             c50,50,100,0,100,0v200H0V200z"></path>
 9                 <path id="wave3" d="M0,200c50-50,99,0,99,0c51,50,101,0,101,0c50-50,100,0,100,0c50,50,100,0,100,0c50-50,100,0,100,0
10             c50,50,100,0,100,0v200H0V200z"></path>
11             </g>
12             
13         </defs>
14         <use xlink:href="#whole" opacity="1"></use>
15     </svg>

常規操做，先來個svg標籤，定義好寬高，裏面放個defs標籤，用於隱藏內部元素，由於咱們須要的可不止是一個波浪，因此咱們用g標籤包住，方便定義樣式

在css中這樣設置：

 1         @keyframes move1 {
 2             0%{transform: translateX(-500px) scaleX(2.5);}
 3             100%{transform: translateX(0) scaleX(2.5);}
 4         }
 5         @keyframes move2 {
 6             0%{transform: translateX(-600px) scaleX(3);}
 7             100%{transform: translateX(0) scaleX(3);}
 8         }
 9         @keyframes move3 {
10             0%{transform: translateX(-800px) scaleX(4);}
11             100%{transform: translateX(0) scaleX(4);}
12         }
13         #wave1{animation: move1 2s linear infinite;}
14         #wave2{animation: move2 1.7s linear infinite;}
15         #wave3{animation: move3 2s linear infinite;}    

每一個波浪我都定義了不一樣的樣式，是他們看起來有所不一樣，且運動速度也不同

這樣波浪就作好了

可是這樣就夠了麼？

咱們知道波浪動畫的應用其實很普遍，上述所作只不過是最普通的一個用法

其餘用法怎麼作呢？好比說下面這個：

其實也至關簡單隻要用到mask標籤就能夠了

 1 <defs>
 2             <g id="whole" fill-opacity="0.3" fill="black" mask="url(#mask)">
 3                 <use x="0" y="0" xlink:href="#text" opacity="1" fill="#FFF"></use>
 4                 <path id="wave1" d="M0,200c50-50,99,0,99,0c51,50,101,0,101,0c50-50,100,0,100,0c50,50,100,0,100,0c50-50,100,0,100,0
 5             c50,50,100,0,100,0v200H0V200z"></path>
 6                 <path id="wave2" d="M0,200c50-50,99,0,99,0c51,50,101,0,101,0c50-50,100,0,100,0c50,50,100,0,100,0c50-50,100,0,100,0
 7             c50,50,100,0,100,0v200H0V200z"></path>
 8                 <path id="wave3" d="M0,200c50-50,99,0,99,0c51,50,101,0,101,0c50-50,100,0,100,0c50,50,100,0,100,0c50-50,100,0,100,0
 9             c50,50,100,0,100,0v200H0V200z"></path>
10             </g>
11             <text id="text" transform="translate(100,290)" font-size="150" font-weight="600">TEXT</text>
12             <mask id="mask">
13             <use x="0" y="0" xlink:href="#text" opacity="1" fill="#FFF"></use>
14             </mask>
15         </defs>

text標籤設置文字內容樣式，mask標籤必定要放在defs中以代表他是做爲遮罩來使用的，最後用use標籤在g中調用mask

成功實現文字遮罩效果

還有加速球效果

這個我就不說了，也是遮罩效果，只不過從文字變成圓了而已