まさにクール! 映画で見かけるようなサイバーなインターフェイスを実装したサイバーポップオーバー2025を紹介します。 下記はデモをgifアニメーション化したもので、実際にはボタンやパネルにグリッチの揺れるエフェクトがあります。また、アクション時の音もかなりサイバーです。 グリッチの動作は、下記ページでお楽しみください。 ボタンをクリックしたときの電子音も心地よいです(特にProceed)。また、キーボード操作(U, Esc, Return)にも対応しています。 See the Pen CyberPopover 2025 by coliss (@coliss) on CodePen. アクション時の音とキーボード操作はJavaScriptで実装されていますが、それ以外はHTML+CSSで実装されています。とはいっても、コードはかなり複雑です。たとえば、ボタンのHTMLだけでも下記の通りです。