일반적인 CSS 스타일 (3)-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

일반적인 CSS 스타일 (3)

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 15, 2016 pm 04:49 PM

1. 2D변환

　1. 변환 객체 변환 설정 또는 검색

값:

없음: 6개 값(a, b, c, d, e, f) 변환 행렬 형식으로 2D 변환을 지정합니다. 이는 [a, b, c, d, e를 직접 적용하는 것과 같습니다. , f]변환 행렬

번역([, ]). 첫 번째 매개변수는 X축에 해당하고 두 번째 매개변수는 Y축에 해당합니다. 두 번째 매개변수가 제공되지 않으면 기본값은 0입니다.

moveX(): 객체의 X축(가로 방향) 이동을 지정합니다.

translateY(): 객체의 Y축(세로 방향)의 이동을 지정합니다.

회전(): 객체의 2D 회전을 지정합니다. 첫 번째 매개변수는 X축에 해당하고 두 번째 매개변수는 Y축에 해당합니다. 두 번째 매개변수가 제공되지 않으면 기본적으로 첫 번째 매개변수의 값이 사용됩니다.

scaleX(): 객체 X축의 (수평) 크기 조정을 지정합니다.

ScaleY(): 개체 Y축의 (수직) 배율을 지정합니다.

skew( [, ]): 객체 기울이기 변환(경사 왜곡)을 지정합니다. 첫 번째 매개변수는 X축에 해당하고 두 번째 매개변수는 Y축에 해당합니다. 두 번째 매개변수가 제공되지 않으면 기본값은 0입니다.skewX(): 객체 X축의 (수평) 왜곡을 지정합니다.

　skewY(): 객체의 Y축의 (수직) 왜곡을 지정합니다

참고: 브라우저마다 다음 접두사가 필요합니다.

커널 유형 쓰기 웹킷(크롬/사파리) -웹킷 변환 게코(파이어폭스) -moz-변환 프레스토(오페라) -o-변환 트라이던트(IE)

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

-ms-변환 W3C 변형

예:

CSS 코드:

<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>

HTML 코드:

<span style="font-size: 15px;"><span style="color: #0000ff;"><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></span>

　2. 변환원점 특정 원점에서 변환할 객체를 설정하거나 검색합니다.

값:

　: 좌표 값을 백분율로 지정합니다. 부정적일 수 있습니다.

: 길이값으로 좌표값을 지정합니다. 부정적일 수 있습니다.

왼쪽 : 원점 가로좌표를 leftcenter로 지정 ① : 원점 가로좌표를

으로 지정

centerright : 원점의 가로좌표를

으로 지정

righttop : 원점의 세로좌표를

으로 지정

topcenter② : 원점의 세로좌표를

으로 지정

centerbottom : 원점의 세로좌표를 하단으로 지정

다양한 브라우저에서 작성하는 방법:

커널 유형 쓰기 웹킷(크롬/사파리)

内核类型	写法
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-변형-원산지 프레스토(오페라) -o-변형-원산지 트라이던트(IE) -ms-변환-원산 W3C 변환 원본

　　例子：

　　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>

　　HTML代码：

<span style="font-size: 15px;"><span style="color: #0000ff;"><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></span>

　　　二、过渡样式

　　　　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>


　　　　HTML代码：

<span style="font-size: 15px;"><span style="color: #0000ff;"><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></span>

请将鼠标放在上面

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>

　　　HTML代码;　

<span style="font-size: 15px;"><span style="color: #0000ff;"><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 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></span></span>

延迟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>

　　HTML代码：

<span style="font-size: 15px;"><span style="color: #0000ff;">  <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></span>

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

성명