どうも！LSSです！！
JavaScriptには Math.random() が用意されており、簡単に乱数を生成する事ができます。
一方、CSSには乱数がありません。
ので、乱数が必要ならJavaScriptを併用すれば良いのですが、
「CSSのみで疑似的に乱数を作る方法」
の案を練っていたので、今回実際に作ってみました。
（が、記事タイトル通り難アリです^^;）
CSSで疑似乱数
「ボタン」をクリックすると、上のラジオボタン６つのうちどれかにチェックが入ります。
どこにチェックが入るか、がランダムです。
コード
<style>
@keyframes rndma{
0%{left:0px;}
100%{left:-600px;}
}
.rndm{
position:relative;
width:100px;
height:60px;
border-radius:10px;
border:10px outset #ccffaa;
background-color:#bbee99;
box-sizing:border-box;
text-align:center;
overflow:hidden;
}
.rndmb{
position:absolute;
width:700px;
height:40px;
box-sizing:border-box;
animation:rndma 4s linear infinite;
}
.rndml{
display:inline-block;
position:relative;
width:100px;
height:40px;
box-sizing:border-box;
}
</style>
<div class="rndmrs">
<input id="rndmr1" name="rndmn" type="radio" />
<input id="rndmr2" name="rndmn" type="radio" />
<input id="rndmr3" name="rndmn" type="radio" />
<input id="rndmr4" name="rndmn" type="radio" />
<input id="rndmr5" name="rndmn" type="radio" />
<input id="rndmr6" name="rndmn" type="radio" />
</div>
<div class="rndm">
<div class="rndmb">
<label class="rndml" for="rndmr1"> </label>
<label class="rndml" for="rndmr2"> </label>
<label class="rndml" for="rndmr3"> </label>
<label class="rndml" for="rndmr4"> </label>
<label class="rndml" for="rndmr5"> </label>
<label class="rndml" for="rndmr6"> </label>
<label class="rndml" for="rndmr1"> </label>
</div>
ボタン
</div>
疑似乱数になる仕組み
６つあるラジオボタンをチェック対象とした<label>が、見えませんが「ボタン」の上をアニメーションで流れています。
ユーザーが「ボタン」をクリックした時、その上に乗っている「見えないラベル」をクリックする事になります。
そのクリックした時にそこにあった「見えないラベル」に対応したラジオボタンにチェックが入る事になります。
仮に、「見えないラベル」に色をつけて見えるようにすると次のようになります。
問題点
構想時点では「回転をめっちゃ速くしたら、人為的に狙えなくなってより乱数っぽくなるな」と思っていたのですが…速くするとラベルが滅多に反応しなくなってしまいました^^;
今のこの速度でもたまに反応しない事があります。
恐らくは、クリックの「マウスボタンを押し下げた時」と「マウスボタンを離した時」で、その下にあるラベルが違うものになっていると、「ラベルがクリックされた事にならない」という反応になってしまうものと思われます^^;
うーん、これさえうまくいけば、あとは「ラジオボタンを非表示にして、各ラジオボタンの:checkedで他のCSS表現を呼び出す」といった感じに可能性が広がったのですが…^^;
結論：JavaScriptを使おうｗ
この記事の冒頭の「ボタン」のようなものを、難アリのまま疑似的な乱数として使う事は可能ではあります。
が、乱数として不完全ですし、クリックに反応しない事もある、という欠陥があるものを、この長いコードでわざわざ実現するよりは…
「素直にJavaScriptを使って簡潔に書く」ほうがいいですねｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
