本來(lái)寫(xiě)這個(gè)特效 我打算用css實(shí)現(xiàn)的，結(jié)果是一波三折，我太難了，最終沒(méi)能用css實(shí)現(xiàn)，轉(zhuǎn)戰(zhàn)了canvas來(lái)實(shí)現(xiàn)。來(lái)吧先看效果圖

當(dāng)然這個(gè)圖的波浪高度、頻率、位置、速度都是可調(diào)的，請(qǐng)根據(jù)自己的需求調(diào)整，如果你講波浪什么的調(diào)大一下 還有有擺動(dòng)的效果哦。

以下是完整代碼

<template><div><canvas ref="canvas" width="2000" height="300"></canvas