CSSのみで波を作りたい

cssのみで流れる波のようなものを作りたいのですが、

css
1body{content: "";
2    position: fixed;
3    bottom: 0;
4    width: 100%;
5    background: rgba(0, 128, 256, 0.3);
6    pointer-events: none;
7    height:50 px;
8}

としているのですが波が作れません。どのように作れば良いでしょうか。投げやりな質問ですいません。

jun26

2021/09/27 03:20

cssだけで波（アニメーション）を作りたいとのことでしょうか？

hiei1

2021/09/27 03:27

そうです。

yambejp

2021/09/27 03:35

> 流れる波のようなものの仕様がわかりません。どこか参考にした似たようなサイトはありませんか？もしくは手書きで書いた画像などを例示ください

hiei1

2021/09/27 03:49

https://coco-factory.jp/ugokuweb/move02/5-10/ このサイトのような波をCSSのみで作りたいのですが

hiei1

2021/09/27 03:50

線だけを動かして波が動くようにしたいのですが

hiei1

2021/09/27 03:51

それか https://codepen.io/yamaok/pen/OJJWJRQ こんな感じです。

Lhankor_Mhy

2021/09/27 04:38

今は亡き kikusd さんのお知り合いかな？ https://teratail.com/questions/361110

hiei1

2021/09/27 05:27

それを見て書いてました。

Lhankor_Mhy

2021/09/27 06:10 編集

なるほどですね。ご解決されたようですので蛇足になると思いますが、せっかく作ったので一応回答をしてサンプルを置いておきます。

行動規範の内容に同意します

回答2件

すでにご解決のようですが、サンプルを置いておきます。

https://jsfiddle.net/Lhankor_Mhy/34yscg8f/

css
1body::after {
2  content: "";
3  position: fixed;
4  bottom: 0;
5  width: 100%;
6  background: rgba(0, 128, 256, 0.3);
7  pointer-events: none;
8  height: 50px;
9  border-top: 36px solid;
10  background-clip: padding-box;
11  border-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%201440%20100%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20style%3D%22fill%3A%20rgba(0%2C%20128%2C%20256%2C%200.3)%22%20d%3D%22M%200%2C90%20C%20360%2C90%20360%2C10%20720%2C10%20S%201080%2C90%201440%2C90%20L1440%2C100%20L0%2C100Z%20%22%2F%3E%3C%2Fsvg%3E")
12    100% 0%;
13}