kscc

スポンサーサイト

一定期間更新がないため広告を表示しています

CSS3でマウスの軌跡を表示させる何かよくわからないものを作ってみた


一応念のためですが
CSS3に対応したSafariとかChromeとかでご覧ください。

まぁ実際作ったのはこんなんなんだよ諸君。

上のボックスにマウスを乗せると軌跡が楽しめるという
ただそれだけのボックスです。

イライラした時とかにグリグリとマウスを動かすと気持ちが落ち着くかもしれませんが
たぶんそんなことはありませんのでご注意ください。

というワケで
こんな感じで作られております。

CSSはこんな感じ。

table.funny_table {
	border:1px solid #aaaaaa;
}

td.funny_cell {
	width:5px;
	height:5px;
	background-color:#ffffff;
	transition:background-color 0.1s linear; /* CSS3 */
	-moz-transition:background-color 0.1s linear; /* Firefox用 */
	-webkit-transition:background-color 0.1s linear; /* Safari,Chrome用 */
}

td.stoker_cell:hover {
	background-color:#d02153;
}

そしてHTMLはこんな感じ。

<table class="funny_table" cellpadding="0" cellspacing="0">
<tr>
	<td class="funny_cell"></td>
	<td class="funny_cell"></td>
	<td class="funny_cell"></td>
	<td class="funny_cell"></td>
	<td class="funny_cell"></td>
	<td class="funny_cell"></td>
	<td class="funny_cell"></td>
	<td class="funny_cell"></td>
	<td class="funny_cell"></td>
	<td class="funny_cell"></td>
	<td class="funny_cell"></td>
	<td class="funny_cell"></td>
	<td class="funny_cell"></td>
	<td class="funny_cell"></td>
	<td class="funny_cell"></td>
	<td class="funny_cell"></td>
	<td class="funny_cell"></td>
	<td class="funny_cell"></td>
	<td class="funny_cell"></td>
	<td class="funny_cell"></td>
</tr>
</table>

ソースを見て頂けると早いのですが
tableでtdを繰り返しているだけですのでえらいことになっています。

もうソースむっちゃくちゃ。

まぁこんなのもできるのよーということで
CSS3ってとても素敵なんですね。
スポンサーサイト