[CSS]ふんわりとアニメーションで浮かび上がるツールチップ

スクリプトを使用しないで、ツールチップがふんわりとアニメーションで浮かび上がるスタイルシートをAdmix Webから紹介します。

デモのキャプチャ

Creating a Bubble Coda Style with CSS3
デモページ

使用しているのはCSS3で、ふんわりと浮かび上がるアニメーションはChrome, Safariで動作可能となっています。
CSSアニメーションに未対応のFirefoxやIEなどのブラウザでは、アニメーション無しでツールチップが表示されます。

HTML

HTMLはリスト要素で実装されています。

CSS

CSSでは、まずliをインラインにし、カーソルを変更します。

次にパネルとして表示されるli内のdiv要素をスタイリングします。ポイントは不可視状態に「visibility:hidden;」と「opacity: 0;」を使用していることです。
そして、角丸やシャドウなども使用され、デザインもクールなものとなっています。アニメーションの設定は0.5sとなっています。

ホバー時のエフェクトには、divのパネルを「visibility:visible;」と「opacity: 1;」で可視化し、30px上部にアニメーションを設定しています。

sponsors

top of page

©2018 coliss