奇技淫巧——CSS 實現波浪效果

  • 時間:2018-10-30 22:55 作者:web秀 來源:web秀 閱讀:91
  • 掃一掃,手機訪問
摘要:點擊右上方紅色按鈕關注“web秀”,讓你真正秀起來前言一直以來,使用純 CSS 實現波浪效果都是十分困難的。CSS 實現波浪效果由于實現波浪的曲線需要借助貝塞爾曲線。 而使用純 CSS 的方式,實現貝塞爾曲線,額,暫時是沒有很好的方法。 當然,借助其余力量(SVG、CANVAS),是可以很輕松的完成

點擊右上方紅色按鈕關注“web秀”,讓你真正秀起來

前言

一直以來,使用純 CSS 實現波浪效果都是十分困難的。

奇技淫巧——CSS 實現波浪效果

CSS 實現波浪效果

由于實現波浪的曲線需要借助貝塞爾曲線。 而使用純 CSS 的方式,實現貝塞爾曲線,額,暫時是沒有很好的方法。 當然,借助其余力量(SVG、CANVAS),是可以很輕松的完成所謂的波浪效果的。

下面先來看看非 CSS 方式實現的波浪效果。

SVG 實現波浪效果

借助 SVG ,是很容易畫出三次貝塞爾曲線的。

奇技淫巧——CSS 實現波浪效果

SVG 實現波浪效果

奇技淫巧——CSS 實現波浪效果

SVG 實現波浪效果

畫出三次貝塞爾曲線的核心在于 這一段。感興趣的可以自行去研究研究。

canvas 實現波浪效果

使用 canvas 實現波浪效果的原理與 SVG 一樣,都是利用路徑繪制出三次貝塞爾曲線并賦予動畫效果。

奇技淫巧——CSS 實現波浪效果

canvas 實現波浪效果

奇技淫巧——CSS 實現波浪效果

canvas 實現波浪效果

可以復制上方代碼至在線coding, 查看效果。

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

CSS實現波浪效果

最開始不是說css不能實現嗎?是,我們沒有辦法直接繪制出三次貝塞爾曲線,但是我們可以利用少量討巧的方法,模擬達到波浪運動時的效果,下面來看看這種方法。

原理

原理十分簡單,我們都知道,一個正方形,給它增加 border-radius: 50%,將會得到一個圓形。

奇技淫巧——CSS 實現波浪效果

CSS實現波浪效果

width: 240px;
height: 240px;
background: #f13f84;
border-radius: 50%;

好的,假如 border-radius 沒到 50%,但是接近 50% ,我們會得到一個這樣的圖形(注意邊角,整個圖形給人的感覺是有點圓,卻不是很圓。)

奇技淫巧——CSS 實現波浪效果

CSS實現波浪效果

width: 240px;
height: 240px;
background: #f13f84;
border-radius: 40%;

好的,那整這么個圖形又有什么用?還能變出波浪來不成?

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

奇技淫巧——CSS 實現波浪效果

CSS實現波浪效果

@keyframes rotate{
from{transform: rotate(0deg)}
to{transform: rotate(359deg)}
}
.ripple{
width: 240px;
height: 240px;
background: #f13f84;
border-radius: 40%;
animation: rotate 3s linear infinite;
}

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

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

實現

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

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

奇技淫巧——CSS 實現波浪效果

CSS實現波浪效果

后面漂浮的波浪效果,其實就是利用了上面的 border-radius: 40% 的橢圓形,只是放大了很多倍,視野之外的圖形都 是隱藏的 ,只留下了一條邊的視野,并且添加了少量相應的transform 變換。

可能有部分同學,還存在疑問,OK,那我們把上面的效果隱藏部分顯示解決,將視野之外的動畫也補齊,那么其實生成波浪的原理是這樣的:

奇技淫巧——CSS 實現波浪效果

CSS實現波浪效果

圖中的紅色框就是我們實際的視野范圍。

值得注意的是,要看到,這里我們生成波浪,并不是利用旋轉的橢圓本身,而是利用它去切割背景,產生波浪的效果。

完整代碼請點擊下面“理解更多”。

聲明

喜歡小編的點擊關注,理解更多知識!

演示地址頁源碼,請點擊下方“理解更多”!

  • 全部評論(0)
最新發布的資訊信息
【系統環境|】淘碼庫,據消息稱已被調查。淘碼庫源碼網,已經無法訪問!(2020-01-14 04:13)
【系統環境|服務器應用】Discuz隱藏后臺admin.php網址修改路徑(2019-12-16 16:48)
【系統環境|服務器應用】2020新網站如何讓百度快速收錄網站首頁最新方法,親測有用!免費(2019-12-16 16:46)
【系統環境|服務器應用】Discuz發布帖子時默認顯示第一個主題分類的修改方法(2019-12-09 00:13)
【系統環境|軟件環境】Android | App內存優化 之 內存泄漏 要點概述 以及 處理實戰(2019-12-04 14:27)
【系統環境|軟件環境】MySQL InnoDB 事務(2019-12-04 14:26)
【系統環境|軟件環境】vue-router(單頁面應用控制中心)常見用法(2019-12-04 14:26)
【系統環境|軟件環境】Linux中的Kill命令(2019-12-04 14:26)
【系統環境|軟件環境】Linux 入門時必學60個文件解決命令(2019-12-04 14:26)
【系統環境|軟件環境】更新版ThreeJS 3D粒子波浪動畫(2019-12-04 14:26)
手機二維碼手機訪問領取大禮包
返回頂部
双色球号码300期遗传走势图