2022年07月14日(木)
CSSだけでスクロールに合わせて動くホログラムっぽいやつ
Result
See the Pen
Untitled by kachibito (@kachibito)
on CodePen.
角度を変えたり等、動かす事でキラキラする、いわゆるホログラムっぽいものをCSSだけで作ろう、というもの。
ビックリマンチョコのシールみたいなのです。氷河期世代以外でも分かるよね・・
種明かしするまでもないかもですがlinear-gradientとmix-blend-mode、background-attachment: fixed;などで実装されています。
詳しい解説は以下で確認できます。コードはCodepenか下記参考URLにてご参照ください。
via
Holograms, light-leaks and how to build CSS-only shaders.
0
0
1
4author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
‹ PREV
Webやスマホアプリに最適なSVGアニメーションのスピナー！ 超軽量サイズで、くるくる快適に動くぞ -SVG Spinners
NEXT ›
夏季休業のお知らせ（2022年8月11日～8月16日）
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『CSSだけでスクロールに合わせて動くホログラムっぽいやつ』についてまとめています。
この記事は特にLINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
Ads
