はてなブログに来て2年経ちました

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

昨日12月4日ではてなブログでのブログ歴が2年になりました。

前回1年の時はメールが来ていませんでしたが（見逃した？）今回はお祝いメールが届

いていました。

2年続くとは！

1年経ったときは2年目はちょっと無理かなと思っていましたが何だかんだ言って3年目

突入ということになりました。前回も書きましたがブログ自体は2009年にFC2ブログか

ら始めているので長いですがコンスタントに記事を書くようになったのは、はてなブロ

グに来てからです。あとはLSS(id:little_strange)さんのCSSツールをよく使わせて頂いた

のもブログが続いた理由でもありますが最近はLSSさんが休止状態なのでちょっと寂し

いですね。たまにCSSコードの記事を投稿してもらいたいと皆んさんも思っているので

はないでしょうか。大事なのでアンダーライン引いておきます。

今後も自由気ままに

気づいている人がいるかは分かりませんが基本的に月・水・金に投稿し土日はブログ活

動をしないというスタイルです。なので月曜日がいろいろ忙しいんですけどね。

雑記記事メインですが一家に一人と言われているのんべえなので車やPC関係、ガシェッ

ト関係など技術系の記事が多く読まれています。平均すると技術系の記事が多いですが

これからも自由気ままに書いていこうと思っています。

最後に

3年目に突入しまたが、また来年はてなからクラッカーを貰い同じような記事を書いて

いるかは分かりません。途中で投稿頻度が少なくなる時もあるかもしれませんが続けて

行こうとは思っています。こんなのんべえですが今後もよろしくお願いします。

 

 

CSSコード

<style>
@keyframes cbig{
0%{background-size:0% 0%;background-position:0% 0%;}
10%{background-size:0% 0%;background-position:10% 80%;}
60%{background-size:50% 50%;background-position:80% 30%;}
100%{background-size:200% 200%;background-position:100% -150%;}}
.cbox{
width:300px;height:300px;
background-color:;
background-image:url("シャボン玉などの画像");
animation:cbig 7s linear infinite;
background-repeat:no-repeat;
}
@keyframes cbig1{
0%{background-size:0% 0%;background-position:0% 0%;}
18%{background-size:0% 0%;background-position:10% 80%;}
65%{background-size:50% 50%;background-position:80% 30%;}
100%{background-size:200% 200%;background-position:-150% 100%;}
}
.cbox1{
width:300px;height:300px;
background-image:url("シャボン玉などの画像");
animation:cbig1 7s linear infinite;
background-repeat:no-repeat;
}
@keyframes cbig2{
0%{background-size:0% 0%;background-position:0% 0%;}
26%{background-size:0% 0%;background-position:10% 80%;}
70%{background-size:50% 50%;background-position:80% 30%;}
100%{background-size:200% 200%;background-position:-150% -100%;}
}
.cbox2{
width:300px;height:300px;
background-image:url("シャボン玉などの画像");
animation:cbig2 7s linear infinite;
background-repeat:no-repeat;
}
@keyframes cbig3{
0%{background-size:0% 0%;background-position:0% 0%;}
34%{background-size:0% 0%;background-position:10% 80%;}
75%{background-size:50% 50%;background-position:80% 30%;}
100%{background-size:200% 200%;background-position:150% 100%;}
}
.cbox3{
width:300px;height:300px;
background-image:url("シャボン玉などの画像");
animation:cbig3 7s linear infinite;
background-repeat:no-repeat;
}
@keyframes cbig4{
0%{background-size:0% 0%;background-position:0% 0%;}
42%{background-size:0% 0%;background-position:10% 80%;}
80%{background-size:50% 50%;background-position:80% 30%;}
100%{background-size:200% 200%;background-position:-100% -100%;}
}
.cbox4{
width:300px;height:300px;
background-image:url("シャボン玉などの画像");
radial-gradient(farthest-side,#00ff0000 90%,#00ff00ff 99%,#00ff0000 100%);
animation:cbig4 7s linear infinite;
background-repeat:no-repeat;
}
@keyframes cbig5{
0%{background-size:0% 0%;background-position:0% 0%;}
70%{background-size:0% 0%;background-position:10% 80%;}
85%{background-size:50% 50%;background-position:80% 30%;}
100%{background-size:200% 200%;background-position:-150% 100%;}
}
.cbox5{
width:300px;height:300px;
background-image:url("シャボン玉などの画像");
animation:cbig5 7s linear infinite;
background-repeat:no-repeat;
}
.syabon{
width:300px;height:300px;
background-image:url("シャボン玉を出す画像");
background-size:30%;
background-position:0% 100%;
background-repeat:no-repeat;
</style>
<div class="syabon">
<div class="cbox">
<div class="cbox1">
<div class="cbox2">
<div class="cbox3">
<div class="cbox4">
<div class="cbox5"> </div>
<div> </div>
</div>
</div>
</div>
</div>
</div>
</div> 

 

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

【つまづき】CSS、animationとradial-gradientの組み合わせ【実験段階】 - Little Strange Software