CSS test page

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。

もう既に解決したのですが、教訓として……


何故かこちら側のCSSは動いているのにもう一つのブログの方でCSS動かないか考えた結果、コンテンツ＞サイドバーの編集でのHTMLが入っている自由項目の位置が原因でした（笑


A8.net様のブログの方使っておられない方はなんのこっちゃ？となりそうですが、これは結構ありがちなミスなので皆様も気を付けてください。


CSSでの気を付けるべき箇所

・HTMLの位置、CSSでの配置設定のミス　　　　　　　　←今回の原因
（CSSで要素に対して相対的に配置するにしていた場合、相対的な位置が画面外でCSSが表示されない）


・CSSの優先度
（要素が盛りだくさんで書いたCSSが後ろに行っちゃっていて見えない）


・HTMLでのサポートがされていない
（HTMLのバージョンが古い等の理由で使えない）




パッと思いつくのはこれくらいなのでもしこれ以外の原因があるのであれば調べてみてください。


ちなみに、こうこうCSS書いてるんですけどCSSが効きません、どうしたらいいでしょうか？等の質問は受け付けていませんので、どこかのフォーラムに質問してください。お願いします。

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すら使えませんし（汗

続きを読む...