ぼくのなつやすみ OF THE DEAD

貯金が尽きたので働きます、、、

スポンサーリンク

はてなブログでも使える!記事を楽しくするCSS アニメーション

f:id:zihyo:20180311170121j:plain

どうも無能です。

ぼくは、文章力がありません、長文書けません、やる気もありません、空も飛べません。

でも、ブログは書きたい!

そんな、ぼくが書くブログは、クソブログとなっております、、、が

少しでも!、、、と

ブログに動きを付けたり、

www.bokunatsu.net

漫画を載せたりします、、、

www.bokunatsu.net

CSS アニメーションでどんなクソブログも、、、

回転 パターン1

.kuru1 {

text-align: center;

animation: kuru1 2s linear infinite;

}

 

@keyframes kuru1 {

0% { transform: rotateZ(-0deg); }

100% { transform :rotateZ(360deg); }

}

 

 

f:id:zihyo:20171014141406j:plain

 

 

 

回転 パターン2

.kuru2{

text-align: center;

animation: kuru2 0.2s linear infinite;

}

 

@keyframes kuru2 {

0% { transform: rotateY(-0deg); }

100% { transform :rotateY(360deg); }

}

 

 

f:id:zihyo:20171015181548j:plain

 

 

 拡大・縮小

.deka-tibi {
animation-duration: 2s;
animation-name: dekai;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}

@keyframes dekai{
from { transform: scale(1.0, 1.0); }
to { transform: scale(0.6, 0.6); }
}

 

f:id:zihyo:20171015181632j:plain

 感想

明日も仕事!

いかに楽するか、いかにさぼるか、、、

それだけを考えて!!!

スポンサーリンク

スポンサーリンク