いつも読んで頂きありがとうございます。
雑記ブログを書いてる人はたまに？何を書いたらいいか分からなくなる時があると思い
ます。
雑記ブログはジャンルがいっぱい
雑記ブログといっても人それぞれでジャンルも違います。
旅行や料理などを中心に書いている人もいれば日常の事を書いてる人もいます。
私は毎日更新している訳ではないですがそれでも書けない時がたまにあるのでその時は
無理して書きません。まあ、私の記事を待ってる人なんてそんなにいないので。
いや！待ってるよ！と言う人がいれば嬉しいですね。と誰かがコメントして
くれるはずです。
たまに息抜き記事を書く
私の場合はジャンル問わず好き勝手に書いています。
レビュー記事やパソコン関係など真面目な記事もありますが結構調べなければ書けない
ものもあるので面倒です。毎回そういう記事を出そうすると結構な労力ですね。
たまにどうでもいい記事を書いて息抜きするのもいいかなと思っています。
私は息抜きとして以前はLSSさんがCSSコードを出してくれていたのでCSSコードで遊ん
だ記事を出していました。ただ、このCSSコードを応用して作るのが結構大変でたまに
夜な夜な作業する時もありましたがこれが楽しいんです。
という訳でCSSコードで遊ぶ
新たにCSSコードを考える知識もそんなにないので以前作った作品に手を加えてみまし
た。夏と言えばホタルですが前にホタルが飛ぶ作品を作りましたが今回はホタルが葉に
止まっている状態を夜な夜な作業しながら追加しました。前回より雰囲気いいかな。
スマホの人は横にした方が良いかもしれません。
<style>
@keyframes radialsx{
0%,100%{background-position-x:-10%;}
50%{background-position-x:120%;}
}
@keyframes radialsy{
0%,100%{background-position-y:-10%;}
50%{background-position-y:90%;}
}
@keyframes radialsz{
0%,100%{background-size:6px 6px;}
50%{background-size:3px 3px;}
}
.radials{
position:absolute;
top:0;
left:0;
}
.radials div{
width:640px;
height:430px;
position:absolute;
top:0;
left:0;
background-repeat:no-repeat;
animation:
radialsx linear infinite
,radialsy linear infinite
,radialsz ease-in-out infinite;
}
.radials div:nth-child(1){
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
animation-duration:47s,35s,3s;
}
.radials div:nth-child(2){
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
animation-duration:135s,24s,1s;
}
.radials div:nth-child(3){
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
animation-duration:104s,47s,2s;
}
.radials div:nth-child(4){
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
animation-duration:28s,39s,4s;
}
.radials div:nth-child(5){
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
animation-duration:99s,35s,1s;
}
.radials div:nth-child(6){
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
animation-duration:73s,34s,2s;
}
.radials div:nth-child(7){
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
animation-duration:37s,59s,3s;
}
.radials div:nth-child(8){
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
animation-duration:85s,32s,1s;
}
.radials div:nth-child(9){
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
animation-duration:59s,37s,2s;
}
.radials div:nth-child(10){
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
animation-duration:48s,39s,4s;
}
.radials div:nth-child(11){
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
animation-duration:129s,23s,1s;
}
.radials div:nth-child(12){
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
animation-duration:53s,44s,2s;
}
.radials div:nth-child(13){
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
animation-duration:77s,29s,3s;
}
.radials div:nth-child(14){
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
animation-duration:185s,32s,1s;
}
.radials div:nth-child(15){
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
animation-duration:89s,37s,2s;
}
.radials div:nth-child(16){
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
animation-duration:178s,39s,4s;
}
.radials div:nth-child(17){
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
animation-duration:83s,23s,1s;
}
.radials div:nth-child(18){
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
animation-duration:73s,44s,2s;
}
@keyframes hotaru{
0%,100%{background-size:6px 6px;}
50%{background-size:2px 2px;}
}
.hotaru{
position:absolute;
top:200px;
left:60px;
width:50px;
height:50px;
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
background-repeat:no-repeat;
animation:hotaru 3s linear infinite;
}
@keyframes hotaru2{
0%,100%{background-size:6px 6px;}
50%{background-size:3px 3px;}
}
.hotaru2{
position:absolute;
top:45px;
left:20px;
width:50px;
height:50px;
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
background-repeat:no-repeat;
animation:hotaru2 4s linear infinite;
}
@keyframes hotaru3{
0%,100%{background-size:6px 6px;}
50%{background-size:1px 1px;}
}
.hotaru3{
position:absolute;
top:75px;
left:-30px;
width:50px;
height:50px;
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
background-repeat:no-repeat;
animation:hotaru3 2.9s linear infinite;
}
@keyframes hotaru4{
0%,100%{background-size:6px 6px;}
50%{background-size:3px 3px;}
}
.hotaru4{
position:absolute;
top:90px;
left:150px;
width:50px;
height:50px;
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
background-repeat:no-repeat;
animation:hotaru4 2.9s linear infinite;
}
@keyframes hotaru5{
0%,100%{background-size:6px 6px;}
50%{background-size:1px 1px;}
}
.hotaru5{
position:absolute;
top:-45px;
left:55px;
width:50px;
height:50px;
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
background-repeat:no-repeat;
animation:hotaru5 4s linear infinite;
}
@keyframes hotaru6{
0%,100%{background-size:6px 6px;}
50%{background-size:1px 1px;}
}
.hotaru6{
position:absolute;
top:5px;
left:35px;
width:50px;
height:50px;
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
background-repeat:no-repeat;
animation:hotaru6 3s linear infinite;
}
@keyframes hotaru7{
0%,100%{background-size:6px 6px;}
50%{background-size:1px 1px;}
}
.hotaru7{
position:absolute;
top:45px;
left:90px;
width:50px;
height:50px;
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
background-repeat:no-repeat;
animation:hotaru7 3s linear infinite;
}
@keyframes hotaru8{
0%,100%{background-size:6px 6px;}
50%{background-size:1px 1px;}
}
.hotaru8{
position:absolute;
top:-105px;
left:20px;
width:50px;
height:50px;
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
background-repeat:no-repeat;
animation:hotaru8 3s linear infinite;
}
@keyframes hotaru9{
0%,100%{background-size:6px 6px;}
50%{background-size:1px 1px;}
}
.hotaru9{
position:absolute;
top:65px;
left:20px;
width:50px;
height:50px;
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
background-repeat:no-repeat;
animation:hotaru9 4s linear infinite;
}
@keyframes hotaru10{
0%,100%{background-size:6px 6px;}
50%{background-size:1px 1px;}
}
.hotaru10{
position:absolute;
top:-45px;
left:20px;
width:50px;
height:50px;
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
background-repeat:no-repeat;
animation:hotaru10 3.5s linear infinite;
}
@keyframes hotaru11{
0%,100%{background-size:6px 6px;}
50%{background-size:1px 1px;}
}
.hotaru11{
position:absolute;
top:-45px;
left:20px;
width:50px;
height:50px;
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
background-repeat:no-repeat;
animation:hotaru11 3.3s linear infinite;
}
@keyframes hotaru12{
0%,100%{background-size:6px 6px;}
50%{background-size:1px 1px;}
}
.hotaru12{
position:absolute;
top:60px;
left:60px;
width:50px;
height:50px;
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
background-repeat:no-repeat;
animation:hotaru12 4.2s linear infinite;
}
@keyframes hotaru13{
0%,100%{background-size:6px 6px;}
50%{background-size:1px 1px;}
}
.hotaru13{
position:absolute;
top:-120px;
left:20px;
width:50px;
height:50px;
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
background-repeat:no-repeat;
animation:hotaru13 3.6s linear infinite;
}
@keyframes hotaru14{
0%,100%{background-size:6px 6px;}
50%{background-size:1px 1px;}
}
.hotaru14{
position:absolute;
top:130px;
left:40px;
width:50px;
height:50px;
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
background-repeat:no-repeat;
animation:hotaru14 4.6s linear infinite;
}
@keyframes hotaru15{
0%,100%{background-size:6px 6px;}
50%{background-size:1px 1px;}
}
.hotaru15{
position:absolute;
top:-130px;
left:40px;
width:50px;
height:50px;
background-image:radial-gradient(farthest-side,#e1f00a 5%,#ffffff 95%,#00000000 100%);
background-repeat:no-repeat;
animation:hotaru15 3.6s linear infinite;
}
.haikei{
position:relative;
width:640px;
height:430px;
background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/w/whisky-coke/20230725/20230725135631.jpg);
background-size:100%;
}
</style>
<div class="haikei">
<div class="radials">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
<div class="hotaru">
<div class="hotaru2">
<div class="hotaru3">
<div class="hotaru4">
<div class="hotaru5">
<div class="hotaru6">
<div class="hotaru7">
<div class="hotaru8">
<div class="hotaru9">
<div class="hotaru10">
<div class="hotaru11">
<div class="hotaru12">
<div class="hotaru13">
<div class="hotaru14">
<div class="hotaru15"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
最後に
私の場合は月・水・金で記事を出していますが休み明けなどはストックが無い時は出さ
ない時もあります。そのうち投稿回数が減るかもしれませんがブログは何とか続けて行
こうと思ってはいます。まあ、投稿が本当にきまぐれになる日が来るかもしれませんが
今後もヨロシクですね。
今回参考にしたブログはこちら
【CSS】ボール乱舞【小ネタ】 - Little Strange Software
