

ハローワールド

とある要望があり、Monster Hunter Riseというゲームのクエストをランダムに選択する簡単なWebアプリを作りました。

https://sa2taka.github.io/monster-hunter-rise-quest-select/

クエストの表示が味気なかったので、なんかアニメーションでかっこよくできないかなぁと思いまして、色々作っていました。

その結果下記となりました。上記のURLにanimationというクエリパラメータをつけることで動く隠しモードです。

https://sa2taka.github.io/monster-hunter-rise-quest-select/?animation

出来としては、個人的には50点ぐらい。

その中で、右から伸びて左へと縮む線をCSSで書きたかったのですが、ぱっと検索したらなかったので備忘録として残しておきます。多分ちゃんと検索したらあります。

# 結論

<iframe height="401" style="width: 100%;" scrolling="no" title="animation-line" src="https://codepen.io/sa2taka/embed/MWpdOLr?height=401&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/sa2taka/pen/MWpdOLr'>animation-line</a> by sa2taka
  (<a href='https://codepen.io/sa2taka'>@sa2taka</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>


左から伸びて右に縮む線をCSSで書きましたが、情報がぱっと調べた感じなさそうなので備忘録として残します。