search
LoginSignup
716

More than 1 year has passed since last update.

posted at

updated at

Organization

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

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

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.

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
716