CSS演出小ネタ連投です。
【borde-radius】で作った丸型の要素に対し、マウスオーバーでコンテンツを回転させながら浮かび上がらせる方法です。
transformで拡大と回転
言葉で説明するのはとっても難しい（けどやってることは全然難しくない）のでさっそくサンプルをご覧下さい。
HTML
<p>
<span>Shop</span>
<a href="#">More info</a>
</p>
【p】のなかに【span】と【a】が並んで内包されています。通常時は【span】のみ表示させておいてhoverで【a】を浮き上がらせてこよう、という構想。
CSS
p,span,a{
display:block;
position:absolute;
width:100px;
height:100px;
border-radius:50%;
font-size:16px;
text-align:center;
line-height:100px;
text-decoration:none;
}
span{
color:#88f;
box-shadow:0 0 15px #88f inset;
}
a{
color:#fff;
background-color:#88f;
opacity:0;
transform:scale(0.5,0.5) rotateZ(-360deg);
transition:0.7s linear;
z-index:1;
}
p:hover a{
opacity:1;
transform:scale(1,1) rotateZ(0deg);
}
最初にまとめて設定していますが【p】、【span】、【a】すべてに対し100px×100pxサイズを指定、【border-radius:50%】で円形の体裁としています。
で、【span】と【a】を普通に並べずに重ねて表示したいので全部ひっくるめて【position:absolute】としています。これで親要素(【p】)の左上基準にあわせて子要素(【span】と【a】)が重なって表示されます。あとは不要な装飾部分を除いてみるとわかりますが
a{
opacity:0;
transform:scale(0.5,0.5) rotateZ(-360deg);
transition:0.7s linear;
z-index:1;
}
と
p:hover a{
opacity:1;
transform:scale(1,1) rotateZ(0deg);
}
これをhover時とそうでないときとで行ったり来たりします。【opacity】は要素の透明度ですね。通常時に0にしておいてhoverで透過無しに。
【transform】では【scale】で0.5→1とサイズを変えつつ、【rotateZ】で-360°→0°と回転を加えています。【transition】で変化の速度と変化率を調整してます。構造としては単純ですね。
【transform】による回転については以前の記事
CSSのtransformでクルクル回転するパネルのサンプル
でも触れているのであわせて参照ください。
背景変更と組み合わせて使ってみる
こういうのも使いどころが難しいなぁと思いつつ複数並べたときのサンプルなどを。
HTML
<div class="container">
<p class="button01"><span>Beach</span><a href="#">Waikiki</a></p><img src="image001.jpg" />
<p class="button02"><span>Trekking</span><a href="#">Lēʻahi</a></p><img src="image002.jpg" />
<p class="button03"><span>Volcano</span><a href="#">Kīlauea</a></p><img src="image003.jpg" />
<p class="button04"><span>Shopping</span><a href="#">Alamoana</a></p><img src="image004.jpg" />
</div>
先ほどのサンプルに比べ【p】の中に【img】が追加されてます。これを複数並べたもの。
CSS
CSSは全部載せると装飾部分が冗長なので要点だけ抜粋。
img{
display:none;
position:absolute;
width:480px;
height:360px;
display:none;
border-radius:10px;
}
p:hover+img{
display:block;
opacity:0.4;
}
はい、こんな感じで【img】は【display:none】で通常非表示にしておき、隣接セレクタ【p:hover+img】を使ってマウスオーバーした【p】のすぐ隣の【img】だけ表示するようにしています…って本題のボタンアニメーションとは全然関係ないですね。
これによってマウスオーバーした項目に関連する画像が背景に表示されているように見える、ということです。
こういうの作っちゃうと我ながら美的センスがないなぁと思います。画像を変更するよりも単色塗りつぶしの背景で色が変わりつつメッセージも変更される、とかの方がしっくり来まると思います、きっと。
まっとうなデザイナーさんが作ればもっと綺麗なものになるんじゃないでしょうかｗ
んじゃまた。
コメント