CSSで実装したグリッチの揺れるエフェクトがかっこいい! 映画で見かけるようなサイバーなUI -CyberPopover 2025

まさにクール! 映画で見かけるようなサイバーなインターフェイスを実装したサイバーポップオーバー2025を紹介します。

下記はデモをgifアニメーション化したもので、実際にはボタンやパネルにグリッチの揺れるエフェクトがあります。また、アクション時の音もかなりサイバーです。

デモのキャプチャ

グリッチの動作は、下記ページでお楽しみください。
ボタンをクリックしたときの電子音も心地よいです(特にProceed)。また、キーボード操作(U, Esc, Return)にも対応しています。

See the Pen
CyberPopover 2025
by coliss (@coliss)
on CodePen.

アクション時の音とキーボード操作はJavaScriptで実装されていますが、それ以外はHTML+CSSで実装されています。とはいっても、コードはかなり複雑です。たとえば、ボタンのHTMLだけでも下記の通りです。

グリッチのエフェクトは、下記のCSSで実装されています。

元ネタは、下記ポストより。

sponsors

top of page

©2025 coliss