動機
Webフロントエンド開発で役立つサービスまとめ#Codepen
および CSS Art Resourcesを読んだ。Codepenは、
HTML、CSS、JavaScriptによるコード実行環境を提供するサービスです。このサービスの特徴の1として、CSSの作品がアートワークのように多く投稿されており、世界中のCSS職人による素晴らしいギャラリーを堪能することができます。その技術はもはや
変態職人の域に達しているものが多く、より高いレベルのCSSを組みたい場合に勉強になるでしょう。
というもの。そんなCodepen の https://codepen.io/tag/css-animation から、
CSSだけでできるあんなことこんなこと に倣い、Html10行、js no need, cssだけでこんなことができるんだ、すっげー、という私の眼力だけで選出した。役に立つかは知らない。紹介文にも語彙力はない。でも百聞は一見にしかず。
1. CSS mouse-out transition effect
まずはシンプルにホバーミー。
See the Pen CSS mouse-out transition effect by Adam Argyle (@argyleink) on CodePen.
2. Heartbeat CSS
ドキドキ心拍。
See the Pen Heartbeat CSS by Ema (@emabytes) on CodePen.
3. NeonSign
ネオンサイン。これは CSSだけで幻想的な光を放つニキシー管を作れるのか？ でも応用されていてこちらもキレイ。
See the Pen NeonSign by takaharatoru (@takaharatoru) on CodePen.
4. Button-animation in pure css
ボタンも負けちゃいねえ。
See the Pen Button-animation in pure css by Pratham (@ps173) on CodePen.
5. CSS BUTTON-NEON SHADOW WITH ANIMATION
こちらもボタン。
See the Pen CSS BUTTON-NEON SHADOW WITH ANIMATION by Pratham (@ps173) on CodePen.
6. Creative Button Animation Effect CSS Snake Border Animation
更にエフェクト付きボタン。
See the Pen Creative Button Animation Effect CSS Snake Border Animation by Aashutosh Prajapati (@aashu11267) on CodePen.
7. Sliding Squares
正方形がニュルニュル。
See the Pen Sliding Squares by Tom Adey (@tomad8) on CodePen.
8. Nested Boxes
ネストされたBoxがカッコイイ。
See the Pen Nested Boxes by ARRON MCCRORY (@arron21) on CodePen.
9. Breaking News!
速報。ちょっとビックリする。
See the Pen Breaking News! by nate clark (@natec425) on CodePen.
10. Typewriter effect intro (pure CSS, no JS)
タイプライター風エフェクト。もちろん no js。
See the Pen Typewriter effect intro (pure CSS, no JS) by Diana (@dianalis) on CodePen.
11. CSS Wave Loading & Loading Bar
色を変えてみても良さそう。
See the Pen CSS Wave Loading & Loading Bar by Tarik Billa (@tarikbilla) on CodePen.
12.Moving text - Animating keyframes
テキストが動き回るーー。
See the Pen Moving text - Animating keyframes by Maria Briceño (@bsmaria) on CodePen.
13. CSS Particles
ビールの泡みたい。
See the Pen CSS Particles by Paolo Duzioni (@Paolo-Duzioni) on CodePen.
14. Pulse Keyframe Sample
ドックンドックン鼓動が見える。
See the Pen Pulse Keyframe Sample by jiro (@version1) on CodePen.
15. Text Glitch Effect
なんだこれ。。
See the Pen Text Glitch Effect by marinda (@mariiinda) on CodePen.
16. Grace Hopper
グレースホッパーおばちゃん。
See the Pen Single Div Grace Hopper by Tricia Katz (@triciaakatz) on CodePen.
17. Planet Animation
しんがり、地球ではないなにかの惑星。
See the Pen Planet Animation (Only css) by Artyom (@artyom-ivanov) on CodePen.
おまけ
安定の鏡餅、
HTML・CSS開発で困った時に役に立つ記事、100本まとめ がシンプルに楽しい。バックエンドの保守対応をしていると目の保養をしたくなります...
追記
変態的 CoolなCSS Loaders たちを公開している記事を発見したのでここに追記。
I made 100 CSS loaders for your next project - DEV Community 👩💻👨💻
Another 100 CSS loaders for your next project - DEV Community 👩💻👨💻
I made 100 more CSS loaders for your next project - DEV Community 👩💻👨💻
Still 100 CSS loaders for your next project
Adding 100 CSS loaders to the collection of — 500 CSS loaders 🏆 - DEV Community 👩💻👨💻
See the Pen The progress by Temani Afif (@t_afif) on CodePen.
See the Pen Full Screen #10 by Temani Afif (@t_afif) on CodePen.
以上、楽しんで頂けたらさいわいです。