Gängige CSS-Stile (3)-HTML-Tutorial-php.cn

1. 2D-Transformation

　1. Transformation Legen Sie die Transformation des Objekts fest oder rufen Sie sie ab

Wert:

Keine: Geben Sie eine 2D-Transformation in Form einer Transformationsmatrix mit sechs Werten (a, b, c, d, e, f) an, was der direkten Anwendung von a [a, b, c, d, e) entspricht , f]Transformationsmatrix

Translate([, ]). Der erste Parameter entspricht der X-Achse und der zweite Parameter entspricht der Y-Achse. Wenn der zweite Parameter nicht angegeben wird, ist der Standardwert 0.

translatorX(): Geben Sie die Übersetzung der X-Achse (horizontale Richtung) des Objekts an

translatorY(): Geben Sie die Übersetzung der Y-Achse (vertikale Richtung) des Objekts an

Drehen (): Geben Sie die 2D-Drehung des Objekts an. Der erste Parameter entspricht der X-Achse und der zweite Parameter entspricht der Y-Achse. Wenn der zweite Parameter nicht angegeben wird, wird standardmäßig der Wert des ersten Parameters übernommen

scaleX(): Geben Sie die (horizontale) Skalierung der X-Achse des Objekts an

ScaleY(): Gibt die (vertikale) Skalierung der Y-Achse des Objekts an

skew( [, ]): Geben Sie die Objektschrägtransformation (schräge Verzerrung) an. Der erste Parameter entspricht der X-Achse und der zweite Parameter entspricht der Y-Achse. Wenn der zweite Parameter nicht angegeben wird, ist der Standardwert 0 skewX(): Gibt die (horizontale) Verzerrung der X-Achse des Objekts

　skewY(): Gibt die (vertikale) Verzerrung der Y-Achse des Objekts an

Hinweis: Verschiedene Browser erfordern die folgenden Präfixe.

Kerneltyp

Schreiben

Webkit (Chrome/Safari)

-webkit-transform

Gecko (Firefox)

-moz-transform

Presto (Oper)

-o-transform

Trident(IE)

内核类型	写法
Webkit(Chrome/Safari)	-webkit-transform
Gecko(Firefox)	-moz-transform
Presto(Opera)	-o-transform
Trident(IE)	-ms-transform
W3C	transform

-ms-transform

W3C

transformieren

Beispiel:

CSS-Code:

<span style="font-size: 14px;"><span style="color: #800000;">      #transform1
        </span>{<span style="color: #ff0000;">
            margin</span>:<span style="color: #0000ff;"> 0 auto</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-color</span>:<span style="color: #0000ff;"> mediumvioletred</span>;<span style="color: #ff0000;">
            -webkit-transform</span>:<span style="color: #0000ff;"> rotate(15deg)</span>;
         }</span>

Nach dem Login kopieren

HTML-Code:

<span style="font-size: 15px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="transform1"</span><span style="color: #0000ff;">></span>旋转了15度<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

Nach dem Login kopieren

　2. transform-origin Das zu transformierende Objekt an einem bestimmten Ursprung festlegen oder abrufen.

Wert:

　: Geben Sie Koordinatenwerte in Prozent an. Kann negativ sein.

: Geben Sie den Koordinatenwert mit dem Längenwert an. Kann negativ sein.

left: Geben Sie die Abszisse des Ursprungs als leftcenter① an: Geben Sie die Abszisse des Ursprungs als

centerright: Geben Sie die Abszisse des Ursprungs als

rechts oben: Geben Sie die Ordinate des Ursprungs als

topcenter②: Geben Sie die Ordinate des Ursprungs als

centerbottom: Geben Sie die Ordinate des Ursprungs als unten an

So schreiben Sie es in verschiedenen Browsern:

Kerneltyp

Schreiben

Webkit (Chrome/Safari)

内核类型	写法
Webkit(Chrome/Safari)	-webkit-transform-origin
Gecko(Firefox)	-moz-transform-origin
Presto(Opera)	-o-transform-origin
Trident(IE)	-ms-transform-origin
W3C	transform-origin

-webkit-transform-origin

Gecko(Firefox)

-moz-transform-origin

Presto(Oper)

-o-transform-origin

Trident(IE)

-ms-transform-origin

W3C

transform-origin

　　例子：

　　CSS代码：

<span style="font-size: 15px;"><span style="color: #800000;">        #transform1
        </span>{<span style="color: #ff0000;">
            margin</span>:<span style="color: #0000ff;"> 0 auto</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-color</span>:<span style="color: #0000ff;"> mediumvioletred</span>;<span style="color: #ff0000;">
            -webkit-transform</span>:<span style="color: #0000ff;"> rotate(15deg)</span>;/*旋转15度*/<span style="color: #ff0000;">
            -webkit-transform-origin</span>:<span style="color: #0000ff;"> left top</span>; /*以左上角为原点旋转*/
        } </span>

Nach dem Login kopieren

　　HTML代码：

<span style="font-size: 15px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="transform1"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

Nach dem Login kopieren

　　　二、过渡样式

　　　　1、transition-property 检索或设置对象中的参与过渡的属性。

　　　　取值：

　　　　all：所有可以进行过渡的css属性: none：不指定过渡的css属性; 　有过渡效果的属性：; 　　
　　例子：
　　　　CSS代码：

<span style="font-size: 15px;"><span style="color: #800000;">         #transform1
        </span>{<span style="color: #ff0000;">
            margin</span>:<span style="color: #0000ff;"> 0 auto</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-color</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
            transition-property</span>:<span style="color: #0000ff;"> background-color</span>;
            
        }<span style="color: #800000;">
        #transform1:hover
        </span>{<span style="color: #ff0000;">
            transition-duration</span>:<span style="color: #0000ff;">.5s</span>;<span style="color: #ff0000;">
            transition-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> yellow</span>;
        }
                </span>

Nach dem Login kopieren


　　　　HTML代码：

<span style="font-size: 15px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="transform1"</span><span style="color: #0000ff;">></span>请将鼠标放在上面<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

Nach dem Login kopieren

请将鼠标放在上面

2、transition-duration 检索或设置对象过渡的持续时间

　　　 transition-duration:time

　　　例子可参见上个例子。

　 3、transition-timing-function 检索或设置对象中过渡的动画类型。

　　　取值：

　　　linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)cubic-bezier(, , , )：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内。

　　　例子可参见上个例子。

　 4、transition-delay 设置对象延迟过渡的时间。

　　　CSS代码：

<span style="font-size: 15px;"><span style="color: #800000;">        #delay1
        </span>{<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> antiquewhite</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: #800000;">
        #delay1:hover
        </span>{<span style="color: #ff0000;">
            transition-delay</span>:<span style="color: #0000ff;">1s</span>;<span style="color: #ff0000;">
            transition-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> black</span>;
        }<span style="color: #800000;">
        #delay2
        </span>{<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> antiquewhite</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: #800000;">
        #delay2:hover
        </span>{<span style="color: #ff0000;">
            transition-delay</span>:<span style="color: #0000ff;">4s</span>;<span style="color: #ff0000;">
            transition-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> blue</span>;
        }     </span>

Nach dem Login kopieren

　　　HTML代码;　

<span style="font-size: 15px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="delay1"</span><span style="color: #0000ff;">><span style="color: #000000;">延迟</span></span>1s后开始过渡<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;">id</span><span style="color: #0000ff;">="delay2"</span><span style="color: #0000ff;">></span>延迟4s后开始过渡<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

Nach dem Login kopieren

延迟1s后开始过渡

延迟4s后开始过渡

***一般情况下可以将变形与过渡结合使用制作出一些特别的效果。

例：

　　CSS代码：

<span style="font-size: 15px;"><span style="color: #800000;">        #all
        </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-color</span>:<span style="color: #0000ff;"> red</span>;            
        }<span style="color: #800000;">
        #all:hover
        </span>{<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> yellow</span>;<span style="color: #ff0000;">
            transition-delay</span>:<span style="color: #0000ff;"> .5s</span>;<span style="color: #ff0000;">
            transition-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
            transform</span>:<span style="color: #0000ff;"> scale(1.5,1.5)</span>;<span style="color: #ff0000;">
            transition-duration</span>:<span style="color: #0000ff;"> 1s</span>;
        }   </span>

Nach dem Login kopieren

　　HTML代码：

<span style="font-size: 15px;"><span style="color: #0000ff;">  <</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="all"</span><span style="color: #0000ff;">></span>请把鼠标放在上面查看效果<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

Nach dem Login kopieren

请把鼠标放在上面查看效果