CSS3 学習スタイル records_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS3 学習スタイル records_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:50:23

オリジナル

1063 人が閲覧しました

1. CSS3 border

1. Rounded border-radius

border-radius: 値が大きいほど、角が丸くなります。 >

div{    width:100px;    height:100px;    background-color:red;    border-radius:10px;    border-top-left-radius:20px;}

ログイン後にコピー

border-top-left-radius:2em;

border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

2. シャドウ box-shadow

box-shadow: h-shadow v-shadow ブラースプレッドカラーインセット;

div{　　width:100px;　　height:100px;　　background-color:yellow;　　box-shadow: 10px 10px 5px #d8d8d8;}

ログイン後にコピー

h-shadow: 水平方向に右へシフト量;

v-shadow: 垂直下方向のオフセット;

blur: シャドウのサイズ;

inset: 内側のシャドウに変更します。

3. ボーダー画像 border-image

border-image-source border で使用される画像へのパス。

border-image-slice 画像の境界線は内側にオフセットされます。

border-image-width 画像の境界線の幅。

border-image-outset 境界線イメージ領域が境界線を超える量。
border-image-repeat 画像の境界線を繰り返すか、丸めるか、伸ばすか。

2.使用できます選択;

padding-box 背景画像はパディングボックスを基準に配置されます。

background-size:20px 20px;

ログイン後にコピー

border-box 背景画像はボーダーボックスを基準に配置されます。

content-box 背景画像はコンテンツボックスを基準にして配置されます。

padding-box 背景画像はパディングボックスを基準にして配置されます。

border-box 背景画像はボーダーボックスを基準にして配置されます。

content-box 背景画像はコンテンツボックスを基準にして配置されます。

3. トランジション

トランジション: 1 つの属性に 4 つのトランジション属性を設定するために使用される短縮属性。

background-image:url(1.gif),url(2.gif);

ログイン後にコピー

transition-property: トランジションを適用する CSS プロパティの名前を指定します。

transition-duration: トランジション効果にかかる時間を定義します。デフォルトは 0 です。

transition-timing-function: トランジション効果の時間曲線を指定します。デフォルトは「簡単」です。
transition-lay: トランジション効果がいつ開始されるかを指定します。デフォルトは 0 です。
linear は、同じ速度で開始および終了するトランジションエフェクトを指定します (cubic-bezier(0,0,1,1) に等しい)。

ease は、ゆっくり始まり、次に速くなり、ゆっくりと終わるトランジション効果を指定します (cubic-bezier(0.25,0.1,0.25,1))。

ease-in は、低速で開始するトランジションエフェクトを指定します (cubic-bezier(0.42,0,1,1) に等しい)。

ease-out は、低速で終了するトランジションエフェクトを指定します (cubic-bezier(0,0,0.58,1) に等しい)。
ease-in-out は、低速で開始および終了するトランジションエフェクトを指定します (cubic-bezier(0.42,0,0.58,1) と同等)。
cubic-bezier(n,n,n,n) は、cubic-bezier 関数で独自の値を定義します。可能な値は 0 ～ 1 です。
3D 上でマウスを移動すると、360 度変換されます。

<!DOCTYPE html><html><head><style> div{    width:200px;    height:200px;    background-color:#d8d8d8;}div:hover{    width:300px;    transition: width 2s;}</style></head><body>    <div></div></body></html>

ログイン後にコピー

上記は移動しながら位置を変えたり、回転したりするアニメーションです。

div:hover{    transform: rotateY(360deg);    transition: transform 2s;}

ログイン後にコピー

属性はご自身で確認してください。過度に。

<!DOCTYPE html><html><head><style> div{    width:100px;    height:100px;    background-color:#d5d5d5;    color:white;    animation:myfirst 5s;}@keyframes myfirst{    from {margin-left:20px;}    to {margin-left:520px;transform: rotateY(360deg);}}</style></head><body><div>    飞啊飞</div></body></html>

ログイン後にコピー