http://www.codeproject.com/Articles/760609/Animation-on-your-webpages-with-CSS
上記サイトから内容を抽出して、まとめてみました。
●audioタグ
id : 一意の名称。識別用
src, preload, ....... など、パラメータを覚える
例：
<h2>Audio</h2>
<audio controls>
<source src="Audio/kalimba.ogg">
<source src="Audio/kalimba.mp3">
<object id="audioPlayer">
<param name="filename" value="./Audio/kalimba.mp3">
<embed src="./Audio/kalimba.mp3" width="300" height="40"/>
</object>
</audio>
●videoタグ
例：
<h2>Video</h2>
<video controls width="500" height="350" poster="./images/photo1.jpg">
<source src="Video/Wildlife.avi">
<source src="Video/Rajni.mp4">
<object id="mediaplayer">
<param name="filename" value="./Video/Wildlife.avi">
<embed src="./Video/Wildlife.avi" width="500" height="350"/>
</object>
</video>
●Text文字編集
(1) text-overflow
文字が長い場合の設定(clip(省略符号(...)を非表示), ellipsis(省略符号表示), string)
例：
<span style="text-overflow:clip;overflow:hidden; border:2px dashed red;
width:200px;margin:10px;padding:10px;">
(2) text-transform
none, capitalize(先頭文字を大文字表示), lowercase(全て小文字表示), uppercase(全て大文字表示)例：
<div>style="text-transform:capitalize : <span style="border: 1px dashed yellow; font-weight: bold;
text-transform: capitalize">capitalize</span></div>
(3) txt-shadow
影をずらす距離とぼかす半径を3つの長さ（水平距離 垂直距離 半径の順）、色で指定
例：
p.sample1 {text-shadow:3px 3px 2px #0000ff;}
複数影付き文字もできます。
例：
<div style="margin-left:30px; color: black;
text-shadow:
0px -1px 0px blue,
0px -2px 0px yellow,
0px -10px 0px #ff8000,
0px -18px 0px red;font-size:80px">
TAブログ</div>
半径を4～40pxにすることで、fade-out化することができます
例：
<div style="margin-left:30px; color: #fff;
text-shadow:
0px -1px 4px white,
0px -2px 10px yellow,
0px -10px 20px #ff8000,
0px -18px 40px red;font-size:80px">
TAブログ</div>
●アニメーション
transition（時間的変化）を設定します。
(1) transition-property : 変化させるプロパティ名のリストをカンマ（ , ）区切りで指定
例： transition-property: background-color, width, height;
(2) transition-duration: 変化に掛かる時間を指定
例： transition-duration:1s;
(3) transition-timing-function: 変化のタイミング・進行割合を指定
ease、linear、ease-in、ease-out、ease-in-outのいずれかのキーワード、または、 cubic-bezier関数（3次ベジェ関数）でP1とP2それぞれのXとYの値を指定します。 cubic-bezier関数で指定できる値は0～1の範囲内で、その範囲外の場合には無効となります。
・ease cubic-bezier(0.25, 0.1, 0.25, 1.0) を指定したのと同じ（開始と完了を滑らかにする）（初期値）・linear cubic-bezier(0.0, 0.0, 1.0, 1.0) を指定したのと同じ（一定）・ease-in cubic-bezier(0.42, 0, 1.0, 1.0) を指定したのと同じ（ゆっくり始まる）・ease-out cubic-bezier(0, 0, 0.58, 1.0) を指定したのと同じ（ゆっくり終わる）・ease-in-out cubic-bezier(0.42, 0, 0.58, 1.0) を指定したのと同じ（ゆっくり始まってゆっくり終わる）・cubic-bezier(数値, 数値, 数値, 数値) 3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定
例： transition-timing-function: linear;
(4)transition-delay: 変化がいつ始まるかを指定。
指定時間が経過した後に変化が開始されます。
例：マウスオーバ時に、２秒後に幅を200px,フォントサイズを40pxに広げます
<!DOCTYPE html>
<html>
<head> <title>テストページ</title> <style type="text/css"> #exTransition { background-color:aliceblue; border:3px solid; height:100px; width:100px; font-size:10px; text-align:center; border-radius:20px; transition: width 2s,font-size 2s; } #exTransition:hover { width:200px; font-size:40px; } </style> </head>
<body>
<div id="exTransition">TAブログ</div>
</body>
</html>
例：マウスオーバ時に、イメージファイルを透過します
<div id="exTransition2" class="shadow">
<img class="top" src="images/color.jpg" />
<img class="bottom" src="images/BlackNwhite.jpg" />
</div>
#exTransition2 {
position:relative;
height:200px;
width:400px;
margin:0 auto;
}
#exTransition2 img
{
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
max-width:100%; max-height:100%
}
#exTransition2 img.top:hover
{
opacity:0;
}
●2Dアニメーション
(1) tarnslate ： 線形移動
例： div要素を左から右に、マウスオーバ時に線形移動します
<div id="exTranslate" style="background-color:aliceblue;border:3px solid;height:100px;width:100px;clear:both" ></div>
#exTranslate:hover
{
-webkit-transform:translate(600px,0px);
-webkit-transition: ease-in-out 3s;
}
(2) Scale : 拡大縮小
例： div要素を左から右に、マウスオーバ時に２倍に拡大します <div id="exScale" style="background-color:aliceblue;border:3px solid;height:100px;width:100px;clear:both" >Scale</div> #exScale:hover { -webkit-transform:scale(2,2); -webkit-transition: ease-in-out 2s; }
(3) Ratate ： 回転
例： div要素を左から右に、マウスオーバ時に２秒間で90度回転します
<div id="exRotate" style="background-color:aliceblue;border:3px solid;height:100px;width:100px;clear:both" >Rotate</div>
#exRotate:hover
{
-webkit-transform:rotate(90deg);
-webkit-transition: ease-in-out 2s;
}
(4) Skrew ： 要素を傾斜変形
例： div要素を左から右に、マウスオーバ時に２秒間で20度傾斜します
<div id="exSkew" style="background-color:aliceblue;border:3px solid;height:100px;width:100px;clear:both" >Skew</div>
#exSkew:hover
{
-webkit-transform:skew(20deg);
-webkit-transition: ease-in-out 2s;
}
●3Dアニメーション
6面のキューブ図形を使ってアニメーションを作成します。
(1) キューブ図形の作成
<div class="block" style="text-align:center;font-size:40px;">
<div class="sides front1">Front</div>
<div class="sides back1"><br/>Back</div>
<div class="sides left1">Left</div>
<div class="sides right1"><br/>Right</div>
<div class="sides top1">Top</div>
<div class="sides bottom1"><br/>Bottom</div>
</div>
(2)キューブと面の属性定義
.block
{
display: inline-block;
margin-top: 50px;
width: 300px;
height: 300px;
position: relative;
}
.sides
{
width: inherit;
height: inherit;
position: absolute;
opacity: 0.7;
box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.5), 0 0 50px rgba(0, 0, 0, 0.2);
background: #fff;
border: 1px solid #000;
}
(3) 各面を配置する
.front1
{
-webkit-transform: translate3d(0, 0, 150px);
}
.back1
{
-webkit-transform: rotateY(180deg) translate3d(0, 0, 150px); //x=0,y=0 and z=150
}
.top1
{
-webkit-transform: rotateX(90deg) translate3d(0, 0, 150px);
}
.bottom1
{
-webkit-transform: rotateX(-90deg) translate3d(0, 0, 150px);
}
.left1
{
-webkit-transform: rotateY(-90deg) translate3d(0, 0, 150px);
}
.right1
{
-webkit-transform: rotateY(90deg) translate3d(0, 0, 150px);
}
(4) perspective(遠近効果)
透視投影行列を指定します。
この行列は、視点を頂点として底面が視点から無限に遠ざかるピラミッドを想定して、そこに対象物となる立体を位置付けます。
perspective()関数のパラメータとして与えられる深度は、視点からz=0の平面までの距離を表します。
数値はピクセルで指定します。
数値を低くすると、ピラミッドがより平坦になって遠近感が強くなります。
参考URL:http://www.htmq.com/css3/transform_3d.shtml
例：-webkit-transform-style: preserve-3d;
(5) 3Dアニメーション
例： キューブを6秒間線形X軸に360度回転
.block:hover
{
-webkit-transform: rotateX(360deg);
-webkit-transition: all 6.0s linear;
}
●コンテンツ定義
div, content, Padding, Border, Marginの意味
・div
・Content ： イメージやテキストなどのコンテンツボックス領域
・Padding ： バッファ領域
・Border ：ContentとPaddingを囲んだ領域
・Margin ：ページからボックス領域間の透過領域
例：
div : 300x200px
Padding : 15px
border : 5px
Margin : 30px
上記で設定すると、幅は下図のように(400px)となります
300px はコンテンツ幅
2*15px = 30px は両サイドのpadding合計
2*5px= 10px は両方のBorder幅
2*30px = 60px は両方のMargin
同様に高さは、 300px となります。
Paddingは、コンテンツとborder間が狭い場合など、スペースを挿入するときに有効に使います
(1) borderをクラス定義して、使い分ける
.bdGroove
{
border-style:groove;
border: 5px groove red;
}
.bdImage
{
border-image:url(border.png) 30 30 round;
}
.bdShadow
{
box-shadow: 10px 10px 5px #888888;
border: 5px solid red;
}
.bdradius
{
border-radius:25px;
border: 5px solid red;
}
.bdDotted
{
border-style:dotted;
border: 5px dotted red;
}
<table class="bdShadow">
<tr>
<td colspan="4" class="bdGroove"> <b>Note:</b>CodeProject - HTML CSS : BoxModel
</td>
</tr>
<tr>
<td class="bdImage">Padding</td>
<td class="bdradius">Border</td>
<td class="bdDotted">Margin</td>
<td class="bdGroove">Outline</td>
</tr>
</table>
(2) 吹き出しの例
.bubble {
width: 150px;
height: 100px;
background-color: #ff006e;
border-radius: 10px;
}
.arrow
{
width: 0;
height: 0;
position: absolute;
left: 50px;;
border: 10px solid;
border-color: white;
border-top-color: #ff006e;
}
<div class="bubble"><p style="padding:20px;">Hello there</p></div>
<div class="arrow"/>
(3) リストスタイル
参考URL：http://www.htmq.com/style/list-style-type.shtml
0 件のコメント:
コメントを投稿