コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > CSSの知識まとめ(8)

CSSの知識まとめ(8)

WBOY
リリース： 2016-08-18 08:57:58
オリジナル
1365 人が閲覧しました

一般的な CSS スタイル

8. 変身スタイル

要素のサイズ、透明度、回転角度、歪みなどを変更します。

transform : なし

は、スペースで区切られた 1 つ以上の変換関数を表します。これは、要素に対して変換の複数の属性操作を同時に実行できることを意味します。

暖かいリマインダー: 以前は、オーバーレイ エフェクトはカンマで区切られていましたが、トランスフォームで複数の属性を使用する場合はスペースで区切られていました。

1)翻訳()

オブジェクトの2D変換を指定します。最初のパラメータは X 軸に対応し、2 番目のパラメータは Y 軸に対応します。 2 番目のパラメータが指定されていない場合、デフォルト値は 0 です。

ソースコード例:

リーリー
リーリー

効果:

翻訳(20px,20px)

2)translateX()

オブジェクトのX軸（水平方向）の平行移動を指定します。

ソースコード例:

リーリー
リーリー

効果:

translateX(20px)

3)翻訳Y()

オブジェクトのY軸(垂直方向)の平行移動を指定します。

ソースコードの例:

リーリー
リーリー

効果:

翻訳Y(20px)

4)回転()

オブジェクトの2D回転を指定します。

ソースコード例:

リーリー
リーリー

効果:

回転(45度)

5)transform-origin

要素の中心点を指定します。

どの要素にも中心点があります。デフォルトでは、その中心点は要素の X 軸と Y 軸の 50% の位置にあります。

ソースコード例：

リーリー
リーリー

効果:

回転(15度)

 

　　6）scale()

　　　　指定对象的2D scale（2D缩放）。

　　　　第一个参数表示水平方向缩放的倍数，第二个参数表示垂直方向的缩放倍数。如果第二个参数未提供，则默认取第一个参数的值。

　　例子 源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.box6</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">1px solid #000</span>;
}<span style="color: #800000;">
.box6 p</span>{<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#ccc</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;">scale(0.8,0.8)</span>;
}
ログイン後にコピー
<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box6"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>scale(0.8,0.8)<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
ログイン後にコピー

 　　效果：

scale(0.8,0.8)

 

 　　7）skew()

　　　　指定对象skew transformation（斜切扭曲）。

　　　　第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。如果第二个参数未设置，则默认值为0。

　　例子 源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.box7</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">1px solid #000</span>;
}<span style="color: #800000;">
.box7 p</span>{<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#ccc</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;">skew(30deg,10deg)</span>;
}
ログイン後にコピー
<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box7"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>skew(30deg,10deg)<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
ログイン後にコピー

　　效果：

skew(30deg,10deg)

 

　　如果设置"transform:skewX(30deg);"：

skewX(30deg)

 　　如果设置"transform:skewY(30deg);"：

skewY(30deg)

 

 

 9.过渡动画

　　1）过渡属性 （transition-property）

　　　　设置对象中的参与过渡的属性。

　　　　默认值为：all，默认为所有可以进行过渡的css属性。如果提供多个属性值，以逗号进行分隔。

　　　有过渡效果的属性：

       

　　例子 源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.property</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">1px solid #000</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#fff</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">#000</span>;<span style="color: #ff0000;">
    transition-property</span>:<span style="color: #0000ff;">background-color,color</span>;
}<span style="color: #800000;">
.property:hover</span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#000</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">#fff</span>;
}
ログイン後にコピー
<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>请将鼠标移动到下面的矩形上：<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="property"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        设置过渡的属性：
        background-color , color
    </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
ログイン後にコピー

　　效果：

请将鼠标移动到下面的矩形上：

设置过渡的属性： background-color , color

 

 　　2）过渡所需时间（transition-duration）

 　　　　设置对象过渡的持续时间，就是从旧属性过渡到新属性所花的时间。

 　　　　如果提供多个属性值，以逗号进行分隔。

 　　例子 源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.duration</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">1px solid #000</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#fff</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">#000</span>;<span style="color: #ff0000;">
    transition-property</span>:<span style="color: #0000ff;">background-color,color</span>;<span style="color: #ff0000;">
    transition-duration</span>:<span style="color: #0000ff;">2s</span>;
}<span style="color: #800000;">
.duration:hover</span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#000</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">#fff</span>;
}
ログイン後にコピー
<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>请将鼠标移动到下面的矩形上：<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="duration"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        过渡的时间是：2s
    </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
ログイン後にコピー

　　效果：

请将鼠标移动到下面的矩形上：

过渡的时间是：2s

 

　　3）过渡函数（transition-timing-function）

　　　　指过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况。

　　　　其中要包括以下几种函数：

　　　　①ease : 默认值，逐渐变慢(等于 cubic-bezier(0.25,0.1,0.25,1))

　　　　②linear : 匀速过渡效果(等于 cubic-bezier(0,0,1,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 之间的数值。

　　例子 源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.ease</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">1px solid #000</span>;
}<span style="color: #800000;">
.ease-in</span>{<span style="color: #ff0000;">    
    margin-left</span>:<span style="color: #0000ff;">0px</span>;<span style="color: #ff0000;">
    transition-property</span>:<span style="color: #0000ff;">all</span>;<span style="color: #ff0000;">
    transition-duration</span>:<span style="color: #0000ff;">2s</span>;<span style="color: #ff0000;">
    transition-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;
}<span style="color: #800000;">
.ease-out</span>{<span style="color: #ff0000;">    
    margin-left</span>:<span style="color: #0000ff;">0px</span>;<span style="color: #ff0000;">
    transition-property</span>:<span style="color: #0000ff;">all</span>;<span style="color: #ff0000;">
    transition-duration</span>:<span style="color: #0000ff;">2s</span>;<span style="color: #ff0000;">
    transition-timing-function</span>:<span style="color: #0000ff;">ease-out</span>;
}<span style="color: #800000;">
.ease:hover</span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;">200px</span>;
}
ログイン後にコピー
<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>请将鼠标移动到下面的矩形上，并跟着矩形移动：<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ease ease-in"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        加速 ease-in
    </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ease ease-out"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        减速 ease-out
    </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
ログイン後にコピー

　　效果：

请将鼠标移动到下面的矩形上，并跟着矩形移动：

加速 ease-in
减速 ease-out

 

　　4）过渡延迟时间（transition-delay）

　　　　指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。

　　例子 源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.delay</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">1px solid #000</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#fff</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">#000</span>;<span style="color: #ff0000;">
    transition-property</span>:<span style="color: #0000ff;">background-color,color</span>;<span style="color: #ff0000;">
    transition-duration</span>:<span style="color: #0000ff;">2s</span>;<span style="color: #ff0000;">
    transition-delay</span>:<span style="color: #0000ff;">1s</span>;
}<span style="color: #800000;">
.delay:hover</span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#000</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">#fff</span>;
}
ログイン後にコピー
<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>请将鼠标移动到下面的矩形上：<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="delay"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        过渡延迟的时间是：1s
    </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
ログイン後にコピー

　　效果：

请将鼠标移动到下面的矩形上：

过渡延迟的时间是：1s

 

 　　5）过渡动画缩写（transition）

　　　　transition :  < transition-duration >  < transition-delay> , ……

 　　例子 源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.all</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">208px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">1px solid #000</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#fff</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">#000</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;">all 2s ease-in 1s</span>;
}<span style="color: #800000;">
.all:hover</span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#000</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">#fff</span>;
}
ログイン後にコピー
<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>请将鼠标移动到下面的矩形上：<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="all"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        transition:all 2s ease-in 1s;
        所有属性 过渡2s 加速 延迟1s
    </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
ログイン後にコピー

 　　效果：

请将鼠标移动到下面的矩形上：

transition:all 2s ease-in 1s; 所有属性 过渡2s 加速 延迟1s

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

関連ラベル：
CSS知识总结（八）
ソース：php.cn
前の記事：CSS 配置: 相対配置、絶対配置、固定配置 (相対絶対固定) 次の記事：float 属性を li に設定すると、外側の ul を開くことができなくなります。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2270
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2404
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2019
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1905
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1973
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート