どうも！LSSです！！
今回は、さくっと、サンプルとコードだけ。
コード
<style><!--
@keyframes kaiten{
0%{transform:rotate(0deg);top:-300px;}
100%{transform:rotate(720deg);top:2000px;}
}
.waku{
position: absolute;
display:inline-block;
transform-origin:70px 70px;
animation: kaiten 30s linear 0s infinite;
left:100px;
}
.yen{
position:absolute;
font-size:100px;
transform-origin:50% 70%;
color:white;
text-shadow:0px 0px 3px gray;
}
--></style>
<div class="waku">
<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>
こんだけのコードですが、苦戦しました^^;
回転の軸、 transform-origin が結晶の中心にならず…最終的に諦めましたｗ
調整しようとしていたのは、コード９行目、
transform-origin:70px 70px;
のところです。
落下量については、コード４行目の、
100%{transform:rotate(720deg);top:2000px;}
の「2000」の数値を変えると変更できます。
落下にかかる時間は、コード10行目、
animation: kaiten 30s linear 0s infinite;
の「30」の数値を変えると変更できます。（30sで30秒）
なお、
text-shadow:0px 0px 3px gray;
をつけているので、背景が白のブログでも視認可能です^^
さて…次は何をしようかなぁ？
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
