どうも！LSSです！！
なんとなく…ハンバーガーメニューについて考えているうちに、
「丸から四角に変形」
を思いついたので、試してみました。
うまく出来たので、そのままサンプルとして晒してみます^^
ちょっとした注釈？なんかに使えるかもですね。
丸から四角に変形するボックス
右にある、ピンク色の丸にマウスカーソルをあわせてみてください^^
（スマホの方はタップ）
brタグによる改行もできます。
この部分の文章は好きに変更できます！
コード
<style><!--
.hamb{
position:absolute;
z-index:1;
top:0px;right:0px;
overflow:hidden;
padding:5px;
background-color: pink;
border-radius: 50%; width: 30px; height: 30px;
transition:1.2s linear 0s;
}
.hamb:hover{
border-radius: 0%;width: 300px; height: 200px;
}
--></style>
<div style="position: relative;">
<div class="hamb">
ここに適当に文章を書きます。<br />brタグによる改行もできます。<br /><br />この部分の文章は好きに変更できます！
</div>
</div>
解説
そのままコードをコピペして、青文字の部分を表示したい文章に変更するだけで使えます^^
以下、もっとこだわりたい方向けに書いていくと…
5行目
top:0px;right:0px;
右上に配置する指定です。
左上にしたい場合は、 top:0px;left:0px; としてください。
6行目
overflow:hidden;
この記載のおかげで、最初の小さい丸の時に文章が隠れています。
削ると中の文章が丸からはみ出て大変な事になりますｗｗｗ
7行目
padding:5px;
ボックス内の余白です。読みやすい幅に調節できます。
8行目
background-color: pink;
丸から四角に変形するボックスの色を、ここで指定できます。
9行目
border-radius: 50%; width: 30px; height: 30px;
後半のwidthとheightの値で、最初の丸のサイズを指定できます。
10行目
transition:1.2s linear 0s;
この 1.2s が変化にかかる時間で、sは「秒」です。
1.2秒かけて変化する事になり、数字を大きくするとゆっくりに、小さくすると素早く変化します。
13行目
border-radius: 0%;width: 300px; height: 200px;
10行目は最初の丸のサイズでしたが、こちらは変化後の四角のサイズです。
widthが幅、heightが高さを指定します。
あとがき
border-radius:50%;
で、ボックスを円形にできますが、それを transition なり animation なりの動的な変化をかけられるのかな？と試してみました^^
ハンバーガーメニューからちょっとそれたサンプルになりましたが、中の文章部分にリンクとかを置いたらハンバーガーメニューとして通用するかもですね。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
