見出し画像

【ティラノスクリプト】オンマウスで画像リンクを回転させる方法、暗くする方法

紅屋都代丸

表題の件です。
画像自体にcssを使用することでオンマウス用の画像などを作成しなくても良くなるため、変更する際にもめんどくないです。

タグに関しては必要最低限なので、パラメータは各自追加してください。

画像リンクを回転させる

[button graphic="icon.png" target="*next" name="guru"]

ここではnameをguru(ぐるぐるのぐる～！)、ファイル名をicon.png、target(リンク先)を*nextのラベルにしています。

cssファイルに書き加えていきます。
事前に読み込んでいるcssファイル(tyrano/tyrano.css)の適当なところでもokですし、cssファイルを新規に作成して[loadcss]のタグで読み込みでもok。

.guru {
  transition-duration: 0.5s;
 }

.guru:hover{
  transform: rotateY( 360deg );
}

これで横にくるっと回ります。離すと逆回転します。
rotakeXにすると縦にくるっと回ります。


画像リンクを暗くする

[button graphic="icon.png" target="*next" name="kura"]

今回はお名前をkuraにしました。(暗いのくら～！)

.kura:hover {
	filter: brightness(0.3);
}

これで暗くなります。
フィルターには他にもいくつか種類があるので(例えばsepiaでセピア)、バリエーションも出来るかも。


あわせ技

.guru {
  transition-duration: 0.5s;
  
 }

.guru:hover{
  transform: rotateY( 360deg );
  filter: brightness(0.3);
}

ちょっとくどいので実用性は微妙ですが、こういうふうに追加していくと両方使えたりもします。

いーじょう！

ティラノでぐるぐるを使った配信がこちら。サンプルがてらどうぞ。


この記事が気に入ったらサポートをしてみませんか？