どうも！LSSです！！
【CSSサンプル】text-shadowが霧散するサンプルを作ってみました【小ネタ】 - Little Strange Software
のコメント欄にて、
とのコメントをいただきました^^
パッと思いつくのは、before要素やafter要素に★を置いて、その要素だけにtext-shadow効果をつけて、それをアニメーションで位置変化させれば出来るかな？と。
それって出来るんだっけ？？と思ったので、試してみました！
421miyako様、アイデアありがとうございます^^
後ろ（after）に星がついてるバージョン
ここに→カーソルをのせてみてね
コード
<style><!--
.starsscattera::after{
color:transparent;
content:"★";
text-shadow:0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff;
}
.starsscattera:hover::after{
text-shadow:100px 100px 0px #ff800000,-100px 100px 0px #ff800000,100px -100px 0px #ff800000,-100px -100px 0px #ff800000,150px 0px 0px #ff800000,-150px 0px 0px #ff800000,0px 150px 0px #ff800000,0px -150px 0px #ff800000;
transition:0.7s linear 0s;
}
--></style>
<p>ここに→<span class="starsscattera">カーソルをのせてみてね</span></p>
前 （before）に星がついてるバージョン
ここに→カーソルをのせてみてね
コード
<style><!--
.starsscatterb::before{
color:transparent;
content:"★";
text-shadow:0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff;
}
.starsscatterb:hover::before{
text-shadow:100px 100px 0px #ff800000,-100px 100px 0px #ff800000,100px -100px 0px #ff800000,-100px -100px 0px #ff800000,150px 0px 0px #ff800000,-150px 0px 0px #ff800000,0px 150px 0px #ff800000,0px -150px 0px #ff800000;
transition:0.7s linear 0s;
}
--></style>
<p>ここに→<span class="starsscatterb">カーソルをのせてみてね</span></p>
前後両方バージョン
ここに→カーソルをのせてみてね
コード
<style><!--
.starsscatter::after,.starsscatter::before{
color:transparent;
content:"★";
text-shadow:0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff;
}
.starsscatter:hover::after,.starsscatter:hover::before{
text-shadow:100px 100px 0px #ff800000,-100px 100px 0px #ff800000,100px -100px 0px #ff800000,-100px -100px 0px #ff800000,150px 0px 0px #ff800000,-150px 0px 0px #ff800000,0px 150px 0px #ff800000,0px -150px 0px #ff800000;
transition:0.7s linear 0s;
}
--></style>
<p>ここに→<span class="starsscatter">カーソルをのせてみてね</span></p>
ちょっとtext-shadowの内容がえらい事になっていますが
すんなり出来ましたね^^
text-shadowがながったらしいので、ややこしいコードに見えるかもですが、構造的としては、
<style><!--
.クラス名::afterまたはbefore{
color:transparent;
content:"★";
text-shadow:８つの影を指定;
}
.クラス名:hover::afterまたはbefore{
text-shadow:８つの影（変化後）を指定;
transition:0.7s linear 0s;
}
--></style>
<p>ここに→<span class="クラス名">カーソルをのせてみてね</span></p>
と、さほどややこしくないコードになっています^^
※text-shadowについて、詳しく知りたい方は
https://little-strange.hatenablog.com/entry/2020/07/24/232252#text-shadow
をオススメします！（過去記事宣伝ｗ）
また、ブラウザ上でtext-shadowを色々調節できるツールもあります。
星の色は、#ff8000ff が元々の色、#ff800000 が変化後の色で、８桁の16進数で指定しています。
８桁で色指定した場合、前６桁の「#ff8000」の色を、後ろ２桁の「不透過度」で表示する事になり、最初はff（完全に表示）、変化後は00（完全に透明）になっていく、という指定になります。
アニメーションについては、今回は
transition:0.7s linear 0s;
を「:hover」のほうに記載しました。（0.7秒のアニメーション変化、という指定）
「:hover」のほうに書く事で、「マウスカーソルがのった時のみアニメになり、戻る時は瞬間的に戻る」事になります。
※「:hover」じゃないほうに入れると、マウスカーソルを外した時に逆再生のように見える事になります。（その場合、↓の位置に書く事になります。）
.starsscattera::after{
color:transparent;
content:"★";
text-shadow:0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff,0px 0px 0px #ff8000ff;
transition:0.7s linear 0s;
}
.starsscattera:hover::after{
text-shadow:100px 100px 0px #ff800000,-100px 100px 0px #ff800000,100px -100px 0px #ff800000,-100px -100px 0px #ff800000,150px 0px 0px #ff800000,-150px 0px 0px #ff800000,0px 150px 0px #ff800000,0px -150px 0px #ff800000;
}
あとがき
text-shadow は色々な使い方ができて面白いですね^^
…と前から思っていましたが、こうやってbefore要素やafter要素にのみつける、という使い方もまた、表現の幅が広がりそうです！
今回はtransitionによるまっすぐな変化のみでしたが、キーフレームアニメーションでより複雑な動きを入れてみるのもいいかも知れないですね^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
いいですね。カーソルをあてると、四方八方に星が飛び散るなんていうのはどうでしょう？とんでもないこと言いだしてすみません。