【CSS】雪の結晶！？
どうも！LSSです！！
昨日の記事、
に、たくさんのコメントをいただき、ありがとうございました^^
まだクリスマスまでは間があるので、参考にさせていただきたいと思います！
で、そのいただいたコメントのうち。
とのコメントをいただきました！
チカチカは考えていましたが…雪の結晶！
冬っぽくてクリスマスっぽくていいですね^^
でも…あの形、CSSで表現できるのかな？
まず「雪の結晶」の形状ってどんなだったか、
ググってみました。すると…
weathernewsさんの記事で、分かりやすく解説されているものを発見！
記事タイトルから「１つとして同じ形はない」との事。
…なるほど。では、適当な形状でも「これはこういう雪の結晶です！」と言い張ってもいいんですねｗ（←曲解の可能性アリ）
ただ、「六角形が基本」であるという事と、「８種類の分類」がある事が書かれています。
そのうち「樹枝状」と呼ばれる形状について取り上げて、さらに詳しく書かれていますね。
＊
にヒゲが生えたような形を見ていて…この６本の元の枝の、それぞれの形が…
￥
に似てるな、と思ったのでした。
CSSで描いてみた「雪の結晶」
￥
￥
￥
￥
￥
￥
「雪の結晶」です。
ええ、誰がなんて言おうと、これはこういう「雪の結晶」なんです！
（無理がある…かなぁｗｗｗ）
コード
<style><!--
.yen{
position:absolute;
font-size:100px;
transform-origin:50% 70%;
color:white;
left:100px;
}
--></style>
<div style="background-color: blue; position: relative; width: 300px; height: 400px;">
<div class="yen" style="transform: rotate(0deg);">￥</div>
<div class="yen" style="transform: rotate(60deg);">￥</div>
<div class="yen" style="transform: rotate(120deg);">￥</div>
<div class="yen" style="transform: rotate(180deg);">￥</div>
<div class="yen" style="transform: rotate(240deg);">￥</div>
<div class="yen" style="transform: rotate(300deg);">￥</div>
</div>
原理はCSS花火と一緒
以前の記事、CSSで花火を描いた時に、多方向に伸びる花火の線を、角度を変えながら重ねて表示する、という事をやりました。
これと同様に、六角形＝６方向なので、360度／6＝60度づつ、角度を変えて
￥
を配置したら、それっぽくなるんじゃないか？
と試したものが、今回のサンプルになります^^
<div class="yen" style="transform: rotate(0deg);">￥</div>
<div class="yen" style="transform: rotate(60deg);">￥</div>
<div class="yen" style="transform: rotate(120deg);">￥</div>
<div class="yen" style="transform: rotate(180deg);">￥</div>
<div class="yen" style="transform: rotate(240deg);">￥</div>
<div class="yen" style="transform: rotate(300deg);">￥</div>
この部分ですね。
あとは、これをまとめて囲んでいる<div>タグに対して、ゆっくり降りてくるアニメーションを仕込めば、イメージに近いものになりそうです^^
あとがき
ついでに、Amazonも検索してみると、
やはりクリスマス向けの飾りとして、雪の結晶も商品化されてるんですね^^
こんな感じで部屋につるすかのように、ブログ内にぶらさげておくデザインもいいかもｗ
アクセサリーになると「母の日」になるのが不思議ですねｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
クリスマス記事にツリーを使いたくて思案中です。チカチカの飾りほしいですね。雪の結晶が下りてくる感じも。進化系楽しみにしています。