程式設計師們都知道使用純 css 實現波浪效果是十分困難的。
實現波浪的曲線需要借助貝塞爾曲線。而使用純 css 的方式實現貝塞爾曲線暫時是沒有很好的方法。
當然，借助其他力量(svg、canvas)，是可以很輕鬆的完成所謂的波浪效果的。
我們先來看看非 css 方式實現的波浪效果
svg 實現波浪效果
借助 svg ，是很容易畫出三次貝塞爾曲線的。
50.0%
svg畫出三次貝塞爾曲線的核心在於 這一段。感興趣的可以自行去研究研究。
canvas 實現波浪效果
使用 canvas 實現波浪效果的原理與 svg 一樣，都是利用路徑繪製出三次貝塞爾曲線並賦予動畫效果。
$(function() else
to}.ripple
css可能很多人看到這裡還沒懂旋轉起來的意圖，仔細盯著一邊看，是會有類似波浪的起伏效果的。
而我們的目的，就是要借助這個動態變換的起伏動畫，模擬製造出類似波浪的效果。
實現當然，這裡看到是全景實現圖，所以感覺並不明顯，ok，讓我們用乙個個例子看看具體實現起來能達到什麼樣的效果。
我們利用上面原理可以做到的一種波浪運動背景效果圖：
後面漂浮的波浪效果，其實就是利用了上面的 border-radius: 40% 的橢圓形，只是放大了很多倍，視野之外的圖形都 是隱藏的 ，只留下了一條邊的視野，並且增加了一些相應的transform 變換。
可能有部分同學，還存在疑問，ok，那我們把上面的效果隱藏部分顯示處理，將視野之外的動畫也補齊，那麼其實生成波浪的原理是這樣的：
圖中的紅色框就是我們實際的視野範圍。
值得注意的是，要看到，這裡我們生成波浪，並不是利用旋轉的橢圓本身，而是利用它去切割背景，產生波浪的效果。
完整**如下：
web秀
body,html
to.water{
background: #86cbff;
margin-top: 200px;
position: relative;
height: 350px;
width: 300px;
margin-left: 200px;
.ripple{
position: absolute;
width: 500px;
height: 500px;
background: #fff;
border-radius: 40%;
animation: rotate 5s linear infinite;
margin-top: -200px;
margin-left: -100px;
iOS中實現imageView任意角度旋轉的方法
前言 在實際的開發中我們可能會遇程式設計客棧到這種情況 需要對進行一定角度的旋轉。對於這種需要，我們可能會用uiview的transform進行旋轉,但是這樣做其實只是對承載imageview的view進行了一定角度的旋轉,而imageview並沒有旋轉。所有這樣的做法並不好。如果需要實現對imag...
使用canvas實現乙個圓球的觸壁反彈
html canvas id canvas width 500 height 500 style border 1px solid ff0000 canvas js1.獲取上下文 let canvas document.getelementbyid canvas let ctx canvas.get...
CSS技巧！像table一樣布局div
下面是我翻譯的內容，是根據我對文章的理解意譯的，你就別挑 翻譯的不對了，我的目的只是傳達這個css技巧 先看看xhtml的結構 很簡單不用解釋就能看懂，但是這裡給出乙個table的結構，是不是很相似 下來是css equal row row div row one row two row three...