CSS test page

<< 2017年09月 >>
日	月	火	水	木	金	土
					1	2
3	4	5	6	7	8	9
17	18	19	20	21	22	23
24	25	26	27	28	29	30

2017年09月23日

取りあえずanimation説明……（出来てない

HTML （<>が使えないので｛｝で代用しています）

{div class="maru sm one"}{/div}
2～～～14
{div class="maru bi fifteen"}{/div}
{div class="ofthe"}{/div}

上記のdivが自由形式の中に埋め込んでありますのでページ移動したりしても変わらずにずっとバックグラウンドにいてくれます。

本当はもっといい方法があるのかと思いますが取りあえず動いているのでよし（おい

クラスは”形、大きさ、時間（個々のアニメーション）”で区切っています

CSS

真ん中で動いている四角から丸、丸から四角になる変なやつのCSS

.ofthe{
width:100px;
height:100px;
border-radius:50%;　　　　　　　　　　　/*角を削って丸く少なくすると角が尖る*/
text-align:center;
background-color:#aea;　　　　　　　　　/*色*/
opacity: 0.5;　　　　　　　　　　　　　　/*透明度*/
position:fixed;　　　　　　　　　　　　　/*画面に固定（スクロールしても離れない）*/
display:block;　　　　　　　　　　　　　/*正直分からない*/
margin: -45% 0% 0% -21%;　　　　　　　/*位置*/
z-index:-2;　　　　　　　　　　　　　　 /*描画優先度-なので全ての要素より-2後ろに表示*/
animation:ofhteanime 10s ease infinite;　　/*アニメーション*/
}

@keyframes ofhteanime{
0%{border-radius:50%;}
10%{transform:scale(1.5,1.5);border-radius:0%;}
20%{transform:scale(1.5,1.5) rotate(45deg);border-radius:0%;}
40%{transform:scale(1.0,1.0) rotate(-45deg);border-radius:50%;}
50%{transform:scale(1.5,1.5);border-radius:0%;}
60%{transform:scale(1.5,1.5) rotate(-45deg);border-radius:0%;}
80%{transform:scale(1.0,1.0) rotate(45deg);border-radius:50%;}
100%{border-radius:50%;}
}

border-radiusを変えることによって丸、四角を表現。
自動的に中間を変えてくれるのでぬるぬる動きます。

rotateで回転。
丸の時は回転しているか分かりませんが四角の時は回転が表現される。

scaleは大きさ。
四角の時は大きく、丸の時は小さくしてます。

ブワッと来ている周りの丸

.maru{
border-radius:50%;
position:fixed;
opacity: 0;
text-align:center;
display:block;
z-index:-2;
}

上記で丸く、画面に固定。

.sm{
width:30px;
height:30px;
background-color:#00ff00;
}

中間の大きさ3つ定義

.bi{
width:100px;
height:100px;
background-color:#00fb00;
}

大きさを5種類ほど定義。
色も若干変えてます。

.one{animation:loop1 6s ease-in infinite;margin: -47% 0% 0% -12%;}
@keyframes loop1{0%{transform:scale(1.0,1.0) translate(0px,0px);opacity: 0;}70%{opacity: 0.5;}100%{transform:scale(3.0,3.0) translate(100px,-50px);opacity: 0;}}

2～～～14

.fifteen{animation:loop15 14.2s ease-in 4s infinite;margin: -30% 0% 0% -18%;}
@keyframes loop15{0%{transform:scale(1.0,1.0) translate(0px,0px);opacity: 0;}70%{opacity: 0.5;}100%{transform:scale(3.0,3.0) translate(25px,140px);opacity: 0;}}

長いのそのままコピペしちゃったので分かりずらかったらメモ帳にでもコピペしてみてください。

animation:loop15 14.2s ease-in 4s infinite

左の:から名前、時間（始まりから終了まで）、動作（ease-inは緩やかに始まることを定義）、次にアニメーションが始まるまでの遅延時間、アニメーションの繰り返す回数（数字を入れればその回数、infiniteは無限回数）

keyframesはscaleで大きさをだんだん大きく、opacityでだんだん透明度を薄くしてフェードアウト、translateで位置を変えて中心から外側へ移動させています。

大体こんな感じでざっくり説明。

分かる人が見れば頭の悪い書き方だと感じられると思いますが、実際悪いのでゴリ押しで書くしかないんです……

JSすら使えませんし（汗

タグ： CSS Animation

posted by csstestpage at 09:28| Comment(0) | TrackBack(0) | css

え！？

なんか久しぶりに覗いてみたらCSSanimation効いてますね。

位置がずれているようなんで直します。

他にも色々試してみようかな……

posted by csstestpage at 09:18| Comment(0) | TrackBack(0) | （カテゴリなし）

広告

2017年09月23日

取りあえずanimation説明……（出来てない

え！？