Created
February 10, 2012 07:42
-
-
Save onjiro/1787472 to your computer and use it in GitHub Desktop.
吹き出しアニメーション
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style type="text/css"> | |
| /* アイコンは次のサイトのとか使わせてもらったらそれっぽいかも */ | |
| /* http://hail2u.net/blog/webdesign/shirokuro-social-icons-v1.5.html */ | |
| body { | |
| z-index: 0; | |
| margin-left: 80px; | |
| margin-top: 80px; | |
| background-color: #aaa; | |
| } | |
| a { | |
| text-decoration: none; | |
| } | |
| li { | |
| position: relative; | |
| margin-top: 8px; | |
| padding-left: 0.5em; | |
| width: 80px; | |
| background-color: rgba(255,255,255,0.2); | |
| border-radius: 1em; | |
| } | |
| li:hover { | |
| background-color: rgba(255,168,92,0.6); | |
| } | |
| /* drop-shadow をつけるなら吹き出しも画像を使った方がいいかもなぁ */ | |
| li:before { | |
| opacity: 0; | |
| content: ""; | |
| position: absolute; | |
| margin-top: -50%; | |
| top: 1.2em; | |
| margin-left: -96px; | |
| width: 80px; | |
| height: 80px; | |
| background-color: #fff; | |
| border-radius: 50%; | |
| -moz-transform: translate(-20px); | |
| } | |
| li:after { | |
| opacity: 0; | |
| content: ""; | |
| position: absolute; | |
| margin-top: -8px; | |
| top: 1.2em; | |
| margin-left: -8px; | |
| left: 0px; | |
| width: 0px; | |
| height: 0px; | |
| border-left: solid 16px #fff; | |
| border-bottom: solid 8px transparent; | |
| -moz-transform: translate(-20px); | |
| } | |
| li:hover:before { | |
| opacity: 1; | |
| -moz-transform: translate(0); | |
| -moz-transition: 0.5s ease; | |
| } | |
| li:hover:after { | |
| opacity: 1; | |
| -moz-transform: translate(0); | |
| -moz-transition: 0.5s ease; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul> | |
| <li><a href="#!">github</a></li> | |
| <li><a href="#!">qwik</a></li> | |
| </ul> | |
| </body> | |
| </html><html> | |
| <head> | |
| <style type="text/css"> | |
| /* アイコンは次のサイトのとか使わせてもらったらそれっぽいかも */ | |
| /* http://hail2u.net/blog/webdesign/shirokuro-social-icons-v1.5.html */ | |
| body { | |
| z-index: 0; | |
| margin-left: 80px; | |
| margin-top: 80px; | |
| background-color: #aaa; | |
| } | |
| a { | |
| text-decoration: none; | |
| } | |
| li { | |
| position: relative; | |
| margin-top: 8px; | |
| padding-left: 0.5em; | |
| width: 80px; | |
| filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#34FFFFFF, endcolorstr=#34FFFFFF, gradienttype=0); /* for IE8 */ | |
| background-color: rgba(255,255,255,0.2); | |
| border-radius: 1em; | |
| -webkit-transition: background-color 2s default; | |
| } | |
| li:hover { | |
| /* IE8 以前ではリンク以外に対する :hover は対応していないためここでの指定は無効 */ | |
| background-color: rgba(255,168,92,0.6); | |
| -webkit-transition: background-color 2s default; | |
| } | |
| /* drop-shadow をつけるなら吹き出しも画像を使った方がいいかもなぁ */ | |
| li:before { | |
| opacity: 0; | |
| content: ""; | |
| position: absolute; | |
| margin-top: -40px; | |
| top: 1.2em; | |
| margin-left: -96px; | |
| width: 80px; | |
| height: 80px; | |
| background-color: #fff; | |
| border-radius: 50%; | |
| -moz-transform: translate(-20px); | |
| -webkit-transform: translate(-20px); | |
| -webkit-transition: -webkit-transform 0.5s ease; | |
| z-index: 2; | |
| } | |
| li:after { | |
| opacity: 0; | |
| content: ""; | |
| position: absolute; | |
| margin-top: -8px; | |
| top: 1.2em; | |
| margin-left: -8px; | |
| left: 0px; | |
| width: 0px; | |
| height: 0px; | |
| border-left: solid 16px #fff; | |
| border-bottom: solid 8px transparent; | |
| -moz-transform: translate(-20px); | |
| -webkit-transform: translate(-20px); | |
| z-index: 2; | |
| } | |
| li:hover:before { | |
| opacity: 1; | |
| -moz-transform: translate(0); | |
| -moz-transition: 0.5s ease; | |
| -webkit-transition: opacity 2s default; | |
| } | |
| li:hover:after { | |
| opacity: 1; | |
| -moz-transform: translate(0); | |
| -moz-transition: 0.5s ease; | |
| -webkit-transition: opacity 2s default; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul> | |
| <li><a href="#!">github</a></li> | |
| <li><a href="#!">qwik</a></li> | |
| </ul> | |
| </body> | |
| </html> |
IE8 以前での背景に alpha 値を使う方法を追加。ただし ActiveX を有効にする必要がある。
IE8 以前での角丸対応はある程度こちらでできるかも。
http://www.revulo.com/blog/20071014.html
角丸と rgba が使えれば IE8 でも他のブラウザに多少近い表示にできるはずー
before, after 擬似クラスのアニメーションが効かないバグの webkit 側での報告
https://bugs.webkit.org/show_bug.cgi?id=23209
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
webkit では before, after 擬似クラスのアニメーションが効かないバグがあるみたい。
http://code.google.com/p/chromium/issues/detail?id=54699