menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/06/15
  • CSS
  • html5

HTML/CSSのみで実装できるアニメーションなどテクニック

最近ではスクリプトを使用せずに、アニメーションを表現する方法がたくさん出てきました。今回もHTML/CSSのみで実装できるアニメーションをご紹介します。
css5

斜めのラインを表現

要素の上下ラインを斜めに表示する設定です。

See the Pen Vjazrv by brightonline (@brightonline) on CodePen.0

マウスホバーで、ストライプのアニメーション

マウスホバーで、画像の枠にストライプのアニメーションが加わります

See the Pen YWqrwV by brightonline (@brightonline) on CodePen.0

マウスホバーで、メニューがアニメーション

マウスホバーで、メニューの枠や背景がアニメーションします。

See the Pen bepogm by brightonline (@brightonline) on CodePen.0

マウスホバーで、光が走ります。

マウスホバーで、左側から光っぽいラインが走ります

See the Pen mEPBLL by brightonline (@brightonline) on CodePen.0

おしゃれなナビメニュー

おしゃれなナビメニューの設置例

See the Pen gMrXqb by brightonline (@brightonline) on CodePen.0

このポイントだけ抑えていれば簡単に設定できるのでオススメです。

コメントを残す

メールアドレスが公開されることはありません。




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11