もう少しで七夕ですね - のんべえの気まぐれ

いつも読んで頂きありがとうございます。

7月7日は七夕ですね。

願い事はありますか
星空を点滅させてみる
最後に

願い事はありますか

七夕と言えば短冊に願い事を書いて飾りますが、ここ何十年そんなことをしていませ

ん。息子は日曜日に地元で七夕祭りというのがあって小中高生が短冊に願い事を書いて

飾るそうで息子に何か書いたか聞いてみると「足首が治るように」と書いたらしいで

す。サッカーをしていますが足首を痛めて今はテーピングを撒いて試合にも出ています

が完治していないんですよね。

星空を点滅させてみる

以前、LSSさんのコードで瞬く星空というのがあって応用したことがありますが画像を

組み合わせるのが難しかったので違う方法を探していると出来そうなのがあったのでや

ってみました。

<style>
.amanokawa{
width:100%;
height:80vh;
background-image: url('背景画像URL');
background-size:100%;
background-repeat:no-repeat;
}
.star-flashing {
width: 100%;
height: 100%;
position: relative;
}
.star-flashing:before,
.star-flashing:after {
width: 100%;
height: 100%;
content: "";
background-image: url('点滅させる星の画像URL');
background-size: 100%;
background-repeat:no-repeat;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.star-flashing:before {
animation: star-flashing-before 12s infinite;
opacity: 1;
}
@keyframes star-flashing-before {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
60% {
opacity: 1;
}
90% {
opacity: 0;
}
95% {
opacity: 1;
}
}
.star-flashing:after {
transform: scaleX(-1);
animation: star-flashing-after 12s infinite;
}
@keyframes star-flashing-after {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
70% {
opacity: 0
}
80% {
opacity: 1;
}
85% {
opacity: 0;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
<div class="amanokawa">
<div class="star-flashing"> </div>
</div>

まず背景画像を設定します。これはどんな画像でも良いです。

次に.star-flashingで星の画像の点滅の位置を指定します。

そして.star-flashing:before,.star-flashing:afterで星の点滅の画像を指定しopacity: 0;で

透明度を指定します。0で透明です。

星の画像は透過にしてください。分かりやすく赤色にしていますが今回こんな画像を使

用しています。実際はグレー色です。

この画像に transform: scaleX(-1);を指定することで左右反転になります。

反転前と反転後の点滅のタイミングをkeyframesで指定すると良い感じで点滅させるこ

とが出来ます。

他のサイトを参考にして背景を追加して応用していますが、これに流れ星を追加させる

とこんな感じになります。大きさを同じwidth:100%;height:80vh;で作るとスマホだと

流れ星の角度が変わるのでwidth:340px;height:260px;とスマホの画面に合わせまし

た。いろいろ試しましたがダメだったので諦めたのんべえです。

CSSコード

<style>
.amanokawa2{
width:340px;
height:260px;
background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/w/whisky-coke/20230705/20230705095310.png');
background-size:100%;
background-repeat:no-repeat;
}
.star-flashing2 {
width: 100%;
height: 100%;
position: relative;
}
.star-flashing2::before,
.star-flashing2::after {
width: 100%;
height: 100%;
content: "";
background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/w/whisky-coke/20230705/20230705095222.png');
background-size: 100%;
background-repeat:no-repeat;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.star-flashing2::before {
animation: star-flashing2-before 8s infinite;
opacity: 1;
}
@keyframes star-flashing2-before {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
60% {
opacity: 1;
}
90% {
opacity: 0;
}
95% {
opacity: 1;
}
}
.star-flashing2::after {
transform: scaleX(-1);
animation: star-flashing2-after 8s infinite;
}
@keyframes star-flashing2-after {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
70% {
opacity: 0
}
80% {
opacity: 1;
}
85% {
opacity: .3;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes naname{
0%,70%{background-position-x:77%;background-position-y:5%;}
100%{background-position-x:-50%;background-position-y:90%;}
}
.nagare{
width:100%;
height:100%;
border-radius:15px;
animation:naname 7s linear infinite ;
background-image:radial-gradient(15px,#ffffffff 80%,#ffffff00 100%);
background-size:2px 2px;
background-repeat:no-repeat;
}
@keyframes naname2{
0%,80%{background-position-x:110%;background-position-y:15%;}
100%{background-position-x:-60%;background-position-y:150%;}
}
.nagare2{
width:100%;
height:100%;
border-radius:15px;
animation:naname2 7s linear infinite ;
background-image:radial-gradient(15px,#ffffffff 80%,#ffffff00 100%);
background-size:2px 2px;
background-repeat:no-repeat;
}
</style>
<div class="amanokawa2">
<div class="star-flashing2">
<div class="nagare">
<div class="nagare2"> </div>
</div>
</div>
</div>

赤字が流れ星のコードです。