ayakohiroeのブックマーク / 2015年12月18日

Content-Length: 223695 | pFad | https://b.hatena.ne.jp/ayakohiroe/20151218#bookmark-58969766

ayakohiroeのブックマーク / 2015年12月18日 - はてなブックマーク

ayakohiroe id:ayakohiroe

2015年12月18日のブックマーク (2件)

CSS3で作るシンプルなマウスオーバーアニメーション5種
CSS3で作るシンプルなマウスオーバーアニメーション5種 1.背景色がアニメーションするナビゲーション HOME ABOUT GALLERY LINK 2.横からスライドするナビゲーション HOME ABOUT GALLERY LINK 3.拡大・縮小するナビゲーション HOME ABOUT GALLERY LINK 4.くるりと奥に回転するナビゲーション HOME ABOUT GALLERY LINK 5.ぼやっと光るナビゲーション HOME ABOUT GALLERY LINK
ayakohiroe 2015/12/18
CSS3
リンク
CSS3で作るシンプルなマウスオーバーアニメーション5種
Posted: 2011.06.15 / Category: HTML&CSS / Tag: CSS3, アニメーション css3はアニメーションもできてしまうわけですが、ここではわりと簡単につくれるマウスオーバーアニメーションをご紹介いたします。 Chrome、Firefoxで動作確認しております。 css3マウスオーバーアニメーションの基本マウスオーバーアニメーションの前に通常のマウスオーバーをみてみましょう。たとえばリンクの文字色をマウスオーバーしたときに変更したい場合はhover疑似クラスでcolorを指定しますよね。 css a { color: #3399FF; } a:hover { color: #FF6600; } これをアニメーションさせるには「transition」というプロパティを追加します。 transition: プロパティ名　時間　アニメーション方法 ;
ayakohiroe 2015/12/18
CSS3
リンク
- 2015年12月21日
- 2015年12月18日
- 2015年12月17日