html10行、js no need、css (と画像少し) だけでこんなことができるコレクション

動機

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

まずはシンプルにホバーミー。

2. Heartbeat CSS

ドキドキ心拍。

3. NeonSign

ネオンサイン。これは CSSだけで幻想的な光を放つニキシー管を作れるのか？ でも応用されていてこちらもキレイ。

4. Button-animation in pure css

ボタンも負けちゃいねえ。

5. CSS BUTTON-NEON SHADOW WITH ANIMATION

こちらもボタン。

6. Creative Button Animation Effect CSS Snake Border Animation

更にエフェクト付きボタン。

7. Sliding Squares

正方形がニュルニュル。

8. Nested Boxes

ネストされたBoxがカッコイイ。

9. Breaking News!

速報。ちょっとビックリする。

10. Typewriter effect intro (pure CSS, no JS)

タイプライター風エフェクト。もちろん no js。

11. CSS Wave Loading & Loading Bar

色を変えてみても良さそう。

12.Moving text - Animating keyframes

テキストが動き回るーー。

13. CSS Particles

ビールの泡みたい。

14. Pulse Keyframe Sample

ドックンドックン鼓動が見える。

15. Text Glitch Effect

なんだこれ。。

16. Grace Hopper

グレースホッパーおばちゃん。

17. Planet Animation

しんがり、地球ではないなにかの惑星。

おまけ

安定の鏡餅、
HTML・CSS開発で困った時に役に立つ記事、100本まとめ がシンプルに楽しい。バックエンドの保守対応をしていると目の保養をしたくなります...

以上、楽しんで頂けたらさいわいです。