今年のゴールデンウィークは

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

いよいよゴールデンウィークですね。私は暦通りです。

最近は鯉のぼりもカブトも

我が家には長男がいるので小さい頃はカブトも飾って鯉のぼりもベランダ用ですが玄関

の手すりに付けて飾りました。しかし鯉のぼりは中学に入ってから飾らなくなり、カブ

トもいつからか分かりませんが飾らなくなってしまいました。

カブトは飾る家もあると思いますが鯉のぼりは最近は見なくなりましたが屋根より高い

鯉のぼりはどのくらいあるんでしょうかね。

という訳で、とりあえずここで鯉のぼりを泳がせてみましたが泳いでいるように見える

でしょうか。

参考CSSコード

<style>
.haikei{
position: relative; 
top:0px;
left:0px;
width:400px;
height:400px;
background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/w/whisky-coke/20230425/20230425130446.png);
background-size:20%;
background-repeat:no-repeat;
}
.nbr{
display:inline-block;
position: absolute;
top:100px;
left:50px;
transform-origin: 0% 50% 0px;
animation:htmk 0.8s linear 0s infinite alternate;
}
@keyframes htmk{
from{
transform:perspective(150px) rotateY(-1deg) rotateX(-1deg);
}
to{
transform:perspective(150px) rotateY(1deg) rotateX(1deg);
}
}
.nbr2{
display:inline-block;
position: absolute;
top:160px;
left:50px;
transform-origin: 0% 50% 0px;
animation:htmk2 1s linear 0s infinite alternate;
}
@keyframes htmk2{
from{
transform:perspective(150px) rotateY(-0.5deg) rotateX(-1deg);
}
to{
transform:perspective(150px) rotateY(1deg) rotateX(1deg);
}
}
.nbr3{
display:inline-block;
position: absolute;
top:235px;
left:50px;
transform-origin: 0% 50% 0px;
animation:htmk3 1.2s linear 0s infinite alternate;
}
@keyframes htmk3{
from{
transform:perspective(150px) rotateY(-1deg) rotateX(-1deg);
}
to{
transform:perspective(150px) rotateY(2deg) rotateX(1deg);
}
}
.nbr4{
display:inline-block;
position: absolute;
top:300px;
left:50px;
transform-origin: 0% 50% 25px;
animation:htmk4 0.8s linear 0s infinite alternate;
}
@keyframes htmk4{
from{
transform:perspective(150px) rotateY(-1deg) rotateX(-1deg);
}
to{
transform:perspective(150px) rotateY(2deg) rotateX(1deg);
}
}
</style>
<div class="haikei">
<div class="nbr"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/w/whisky-coke/20230425/20230425130458.png" width="257" height="50" loading="lazy" title="" class="" itemprop="image" /></div>
<div class="nbr2"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/w/whisky-coke/20230425/20230425114602.png" width="262" height="74" loading="lazy" title="" class="" itemprop="image" /></div>
<div class="nbr3"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/w/whisky-coke/20230425/20230425130454.png" width="228" height="62" loading="lazy" title="" class="" itemprop="image" /></div>
<div class="nbr4"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/w/whisky-coke/20230425/20230425130450.png" width="222" height="62" loading="lazy" title="" class="" itemprop="image" /></div>
</div> 


コード説明

ポールの画像を背景としてposition: relative; で位置を固定します。
吹き流しと各鯉はposition: absolute;で位置を設定。position: relative; でtop:0px;、left:0px;と設定しているのでそこからの距離を指定します。

keyframesのfrom～toのtransform:perspective(150px) rotateY(-1deg) rotateX(-1deg);の
rotateY及びrotateXの数値は見ながら設定すると良いです。数値を大きくすると動きも大きくなります。

 

こいのぼり 室内 おしゃれ 室内用 鯉のぼり タペストリー インテリア ちりめん素材の室内鯉 ミニサイズ 選べる6種類

posted with カエレバ

 

楽天市場

Amazon

Yahooショッピング

 

ゴールデンウィークの予定

暦通りなので５月１日と２日は仕事です。

その後は連休となりますが嫁が私の実家の手伝いがあるのと息子は部活があるので家族

全員休める日があるかどうかは分かりませんが今回は長女が帰省してくる予定でBBQを

したいと言っているので天気次第ですがやりたいと思います。

まあ、BBQ関係なく夜は長女と一緒に酒を飲むと思いますけどね。

日が合えば家族で何処かに出かけても良いですがコロナの帰省も緩和されて何処に行っ

ても混みそうなのでどうしようか考え中です。

最後に

皆さんはゴールデンウィーク中は何処かに出かけるのでしょうか。

コロナの規制が緩和されて初めてのゴールデンウィークなので何処もかしこも混みそう

な感じですね。これでまた感染者が増えるんでしょうけど。

個人的には釣りもしたいので何処かで息子と二人で行こうかなと思っています。

 

今回参考にしたブログはこちら

【CSS】はためく【実用性ある？？】 - Little Strange Software