CSSで波を作ってみる

揺らぐ円を描いたら、波も作ってみたくなった

ので！！

調べてみたところ、すでに記事があったので参考にさせていただきました。

参考記事
- https://qiita.com/duka/items/c4cf7fef21d7410063cb
揺らぐ円を描いてみた
- https://qiita.com/MogeTaro/items/d1d4cf5bf25eeba17c6a
  自分では思いもつかない方法で感激したのですが、
  これって、もしかして、海も作れるんじゃないかと思ってやってみました。

理想形???(結果)

See the Pen Wave by YamaOK (@yamaok) on CodePen.

やったこと

基本的には参考記事の通りです。
工夫したところといえば、vueで可変にしたところでしょうか。

    const waves = new Vue({
        el:'#waveBack',
        data:{
            // 波の数を指定
            waveCount:28,
            // 波の動き/形を2通り指定
            features:[
                {radius:9,duration:8},
                {radius:10,duration:9},
            ],
        },
        methods: {
            // animationを動的に作成
            getCss:function(wave){
                let feature = this.features[wave % this.features.length]
                // 左から順に重ねるが、２つセットで等間隔に配置する
                let left = -10 + wave * 3 + wave%2 * 3
                return `left:${left}em;bottom:2em;border-radius:${feature.radius}em;animation-duration:${feature.duration}s`
            }
        },
    })