画像にマウスホバーすると枠を残してスライド移動する、みたいなエフェクト
Result See the Pen Image hover animation by kachibito (@kachibito) on CodePen. マウスホバーで画像がスライド移動する際、枠が残るように見えるエフェクトを実...
CSS - transform
画像のマウスホバーしたら少し拡大+テキストがアニメーション表示
Result See the Pen Zoomy Anchor Thing by kachibito (@kachibito) on CodePen. 画像のマウスホバーエフェクトです css html via Zo...
CSSだけで任意のテキストにタイピングアニメーション
Result See the Pen Typewriter animation pure CSS by kachibito (@kachibito) on CodePen. タイプライターのようなエフェクトを任意のテキストに与えます...
リンクにホバーしたら下線をアニメーション表示
Result See the Pen xpwoGq by kachibito (@kachibito) on CodePen. 非表示にした疑似要素をホバー時に表示+遷移するようにしてあります css html via...
CSSのみでマルチレベル対応のオフキャンバスメニュー
Result See the Pen Multi level css only push menu by kachibito (@kachibito) on CodePen. CSSのみでマルチレベル対応のオフキャンバスメニュー。 ...
CSSだけでシンプルなパララックス効果
Result See the Pen Pure css Parallax header by kachibito (@kachibito) on CodePen. CSSのみでシンプルなパララックス効果を実装 スクロールするとhe...
ボタンのホバーアニメーションサンプル集#2
Result See the Pen Animated CSS3 Buttons by kachibito (@kachibito) on CodePen. 疑似要素を応用したホバーエフェクト集。コードは上PENにて。 via ...
ボタンのホバーアニメーションサンプル集#1
Result See the Pen 12 fancy buttons by kachibito (@kachibito) on CodePen. コードは上PENで確認できます via 12 fancy buttons
テキストとCSSだけでローディング中を明示するアニメーション
Result See the Pen Loading by kachibito (@kachibito) on CodePen. css html via Loading
画像を三角形に切り取って綺麗に並べる
Result See the Pen CSS Triangle Image Crop by kachibito (@kachibito) on CodePen. 画像を三角形に切り取って重ならないように配置 clipプロパティを使...
シンプルなパララックスとアニメーションしながらゆっくり拡大/縮小するヘッダ
Result See the Pen CSS Animated Header by kachibito (@kachibito) on CodePen. css html via CSS Animated Header...
クリックで開閉するナビゲーション
Result See the Pen Pure CSS Header Menu by kachibito (@kachibito) on CodePen. よくあるオフキャンバスナビゲーションの類ではなく、その場で開閉するパターンで...
アニメーションするシンプルなローディングアイコン
Result See the Pen CSS Loding animations by kachibito (@kachibito) on CodePen. css html via CSS Loding anim...
テキストにリアルな影を与える
Result See the Pen Simple Skewed Text Shadow (CSS) by kachibito (@kachibito) on CodePen. text-shadowではなく、リアルな影をCSSで作...