以下實現的波浪進度條效果特效方法一些是網上搜集的，我認為比較好的都整理下來了，也有自己純css方法寫的，因為這些交互效果我們在項目中有時會用到。碼云筆記只為大家在需要的時候直接拿去，方便省時省力。不要謝我，我不是雷鋒，哈哈。

看效果圖：

一、使用canvas實現波浪效果

實現原理：利用路徑繪制出三次貝塞爾曲線并賦予動畫效果。

代碼如下：

$(function() {

let?canvas = $("canvas");

let?ctx = canvas[0].getContext('2d');

let?radians = (Math.PI / 180) * 180;

let?startTime = Date.now();

let?time = 2000;

let?clockwise = 1;

let?cp1x, cp1y, cp2x, cp2y;

// 初始狀態

// ctx.bezierCurveTo(90, 28, 92, 179, 200, 100);

// 末尾狀態

// ctx.bezierCurveTo(145, 100, 41, 100, 200, 100);

requestAnimationFrame(function?waveDraw() {

let?t = Math.min(1.0, (Date.now() - startTime) / time);

if(clockwise) {

cp1x = 90 + (55 * t);

cp1y = 28 + (72 * t);

cp2x = 92 - (51 * t);

cp2y = 179 - (79 * t);

}?else?{

cp1x = 145 - (55 * t);

cp1y = 100 - (72 * t);

cp2x = 41 + (51 * t);

cp2y = 100 + (79 * t);

}

ctx.clearRect(0, 0, 200, 200);

ctx.beginPath();

ctx.moveTo(0, 100);

// 繪制三次貝塞爾曲線

ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 200, 100);

// 繪制圓弧

ctx.arc(100, 100, 100, 0, radians, 0);

ctx.fillStyle =?"rgba(154, 205, 50, .8)";

ctx.fill();

ctx.save();

if( t == 1 ) {

startTime = Date.now();

clockwise = !clockwise;

}

requestAnimationFrame(waveDraw);

});

})

主要是利用了動態繪制?ctx.bezierCurveTo()?三次貝塞爾曲線實現波浪的運動效果，感興趣的可以自行研究。

二、使用SVG實現波浪效果

這個原理和canvas實現一樣，借助SVG，是很容易畫出三次貝塞爾曲線的。

代碼如下：

50.0%

畫出三次貝塞爾曲線的核心在于??這一段。(關于SVG，感興趣的可以看看《SVG動畫快速入門實例教程》)

三、純CSS實現波浪效果

不同于以上兩種的方法是，我們不可能直接用CSS繪制出三次貝塞爾曲線，但是我們可以利用一些討巧的方法，模擬達到波浪運動時的效果，姑且把下面這種方法看作一種奇技淫巧。

原理：

首先畫一個正方形，添加border-radius:50%;得到一個圓。

注：border-radius：用來設置邊框圓角，當使用一個半徑時確定一個圓形。

如果?border-radius?沒到50%，但是接近50%，我們會得到一個這樣的圖形：

注意邊角，整個圖形給人的感覺是有點圓，卻不是很圓。額，這不是廢話嗎

我們讓上面這個圖形滾動起來(rotate)，看看效果：

可能很多人看到這里還沒懂旋轉起來的意圖，仔細盯著一邊看，是會有類似波浪的起伏效果的。

而我們的目的，就是要借助這個動態變換的起伏動畫，模擬制造出類似波浪的效果。

實現

當然，這里看到是全景實現圖，所以感覺并不明顯，OK，讓我們用一個個例子看看具體實現起來能達到什么樣的效果。

我們利用上面原理可以做到的一種波浪運動背景效果圖：

后面漂浮的波浪效果，其實就是利用了上面的?border-radius:45%?的橢圓形，只是放大了很多倍，視野之外的圖形都?overflow:hidden?，只留下了一條邊的視野，并且增加了一些相應的?transform?變換。

注意，這里背景是藍色靜止的，運動是白色的橢圓形。

SCSS代碼如下：

body {

position: relative;

align-items: center;

min-height: 100vh;

background-color: rgb(118, 218, 255);

overflow: hidden;

&:before, &:after {

content: "";

position: absolute;

left: 50%;

min-width: 300vw;

min-height: 300vw;

background-color: #fff;

animation-name: rotate;

animation-iteration-count: infinite;

animation-timing-function: linear;

}

&:before {

bottom: 15vh;

border-radius: 45%;

animation-duration: 10s;

}

&:after {

bottom: 12vh;

opacity: .5;

border-radius: 47%;

animation-duration: 10s;

}

}

@keyframes rotate {

0% {

transform: translate(-50%, 0) rotateZ(0deg);

}

50% {

transform: translate(-50%, -2%) rotateZ(180deg);

}

100% {

transform: translate(-50%, 0%) rotateZ(360deg);

}

為了方便寫DEMO，用到的長度單位是VW與VH，不太了解這兩個單位的可以戳這里：《視口百分比長度vh、vw、vi、vb、vmin、vmax單位的了解》

可能有部分同學，還存在疑問，OK，那我們把上面的效果縮小10倍，將視野之外的動畫也補齊，那么其實生成波浪的原理是這樣的：

圖中的虛線框就是我們實際的視野范圍。

值得注意的是，要看到，這里我們生成波浪，并不是利用旋轉的橢圓本身，而是利用它去切割背景，產生波浪的效果。那為什么不直接使用旋轉的橢圓本身模擬波浪效果呢？因為

中間高，兩邊低的效果不符合物理學原理，看上去十分別扭；

可以看看下面這個例子：

Html代碼：

CSS(SCSS)代碼：

.container{

position:relative;

width:375px;

height:100vh;

margin:0auto;

overflow:hidden;

background:linear-gradient(180deg,#fff,#ccc);

}

.wave,

.wave1,

.wave2{

position:absolute;

bottom:-60%;

width:375px;

height:375px;

background-color:hsla(196,100%,53%,.95);

border-radius:45%;

animation:rotate6slinearinfinite;

//mix-blend-mode:multiply;

}

.wave1{

background-color:hsla(196,100%,53%,.94);

transform:translate(-20%,0)rotate(0deg);

animation:rotate16slinear-4sinfinite;

}

.wave2{

background-color:hsla(196,100%,53%,.93);

transform:translate(20%,0)rotate(0deg);

animation:rotate26slinear-2sinfinite;

}

[email?protected]{

50%{

border-radius:38%;

transform:rotate(180deg);

}100%{

border-radius:45%;

transform:rotate(360deg);

}

}

[email?protected]{

50%{

border-radius:38%;

transform:translate(-30%,8%)rotate(180deg);

}100%{

border-radius:45%;

transform:translate(-20%,0%)rotate(360deg);

}

}

[email?protected]{

50%{

transform:translate(30%,8%)rotate(180deg);

}100%{

transform:translate(20%,0%)rotate(360deg);

}

}

四、純CSS實現波浪進度圖

上面的介紹的方法是為我們接下來實現的波浪進度圖提供了幫助，現在我們就使用純CSS實現上面最開始使用SVG或者CANVAS才能實現的波浪進度圖。

HTML代碼：

CSS代碼：

.wave{

position: relative;

width: 200px;

height: 200px;

background-color: rgb(118, 218, 255);

border-radius: 50%;

&::before,

&::after{

content: "";

position: absolute;

width: 400px;

height: 400px;

top: 0;

left: 50%;

background-color:rgba(255, 255, 255,.4);

border-radius: 45%;

transform:translate(-50%, -70%)rotate(0);

animation:rotate 6slinearinfinite;

z-index: 10;

}

&::after{

border-radius: 47%;

background-color:rgba(255, 255, 255,.9);

transform:translate(-50%, -70%)rotate(0);

animation:rotate 10slinear -5sinfinite;

z-index: 20;

}

}

[email?protected]{

50% {

transform:translate(-50%, -73%)rotate(180deg);

} 100% {

transform:translate(-50%, -70%)rotate(360deg);

}

}

效果圖：

雖然效果差了一點點，但是相較于要使用學習成本更高的SVG或者CANVAS，這種純CSS方法無疑可使用的場景更多，學習成本更低！

奇淫技巧推薦

單純的讓一個?border-radius?接近50的橢圓形旋轉，動畫效果可能不是那么好，我們可以適當的添加一些其他變換因素，讓動畫效果看上去更真實：

?在動畫過程中，動態的改變?border-radius?的值；

?在動畫過程中，利用transform對旋轉橢圓進行輕微的位移、變形；

?上面也演示到了，多個橢圓同時轉動，賦予不同時長的動畫，并且添加輕微的透明度，讓整個效果更佳逼真。

結束語：

以上就是碼云筆記為大家帶來的純css實現波浪進度圖特效，是不是很美，這種進度圖使用的場景比較多，希望對大家學習有幫助。文筆有限，才疏學淺，如果你有更好的方法可以留言我們一起討論。

總結

以上是生活随笔為你收集整理的android 波浪进度条方形,CSS3实现波浪进度条效果方法总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。