CSS過渡與轉換

2022-06-16 11:00:11 字數 2957 閱讀 6235

瀏覽器字首:

css3屬性:預覽版,還沒有最終版,所以有很多相容性問題,瀏覽器不識別。

瀏覽器為了使這些屬性相容,每個瀏覽器廠商都提供了乙個屬於自己瀏覽器的語法規則,瀏覽器相容字首。

主流瀏覽器:谷歌,ie,歐朋,火狐,蘋果

瀏覽器字首:

-wekit- 谷歌

-moz- 火狐

-ms- ie

-o- 歐朋

盒子陰影:

box-shadow:0px 0px 0px 0px red;

水平偏移量,垂直偏移量,模糊度,影子大小,顏色

css3漸變:由瀏覽器生成,

線性漸變:

1、單一方向漸變

background:-wbkit-linear-gradient(方向,顏色1,顏色2,顏色3);

方向:left 從左邊開始

right 從右邊開始

top 從上邊開始

bottom 從下邊開始

【注】需要新增瀏覽器字首

background:linear-gradient(to 方向,顏色1,顏色2,顏色3);

to left 到左邊(結束)

to right

to top

to bottom

【注】不要新增瀏覽器字首

2、對角漸變

background:-wbkit-linear-gradient(方向 方向,顏色1,顏色2,顏色3);

left top 從左上角到右下角漸變

left bottom

right top

right bottom

【注】需要新增瀏覽器字首

background:linear-gradient(to 方向 方向,顏色1,顏色2,顏色3);

to left top

to left bottom

to right top

to right bottom

【注】不要新增瀏覽器字首

3、角度的漸變

10deg 10度

4、預設情況下顏色均分

可以指定顏色分布的百分比

background:-wbkit-linear-gradient(left,red 10%,green 40%,blue);

從10%開始漸變,前10%都是red

background:linear-gradient(to left,red 10px,green,blue);

從10px處開始漸變,前10px都是red

徑向漸變:(一定要加瀏覽器字首)

從乙個點到四周的漸變

background:-wbkit-radial-gradient(漸變位置,形狀,大小,顏色1,顏色2,顏色3);

漸變位置:預設從中心到四周

left 從左邊漸變

right

top

bottom

left top 從左上角到四周漸變

left bottom

right top

right bottom

形狀:預設橢圓 ellipse

正圓 circle

【注】元素是正方形,則都是正圓

大小:size,漸變的大小,即漸變到**停止,它有四個值

closest-side:最近邊;

farthest-side:最遠邊;

closest-corner:最近角;

farthest-corner:最遠角;

漸變重複:

線性漸變

background:repeating-linear-gradient(to left,black 10%,white 20%);

-wbkit-background:repeating-linear-gradient(right,black 10%,white 20%);

徑向漸變

background:repeating-radial-gradient:(right,black 10%,white 20%);

【注】漸變用的背景屬性是background-image:;

過渡:讓元素的動畫產生平滑的效果

1、什麼屬性在做動畫 transition-property:屬性1,屬性2,...;

2、過渡時間需要多久 transition-duration:0.5s;

3、延遲時間(選寫) transition-delay:2s;

4、動畫型別(預設勻速) transition-timing-function:;

綜合寫法:

transition:all/具體屬性值 運動時間s/ms 延遲時間s/ms 動畫型別

css3中的2d

二維的平面空間

css3 2d屬性

變形屬性transform:;

2d變換

位移transform:translate(水平位移,垂直位移); 乙個值預設只有水平位移

transform:translatex(10px); 水平位移

transform:translatey(10px); 垂直位移

【注】正值,從上往下從左往右

旋轉transform:rotate(); 預設中心旋轉

transform-origin:left top; 設定旋轉基點

transform-origin:5px 10px;

縮放transform:scale(水平垂直都縮放的倍數); 乙個值

transform:scale(水平縮放,垂直縮放); 兩個值

transform:scalex(水平縮放);

transform:scaley(垂直縮放);

傾斜:transform:skew(水平傾斜); 乙個值

transform:skew(水平傾斜,垂直傾斜); 兩個值

transform:skewx();

transform:skewy();

CSS 過渡 轉換 動畫模組

1 作用 修改a標籤不同狀態的樣式 2 a 標籤的四種狀態 3 注意點 4 練習總結 1 基本使用 div 2 其他屬性 3 連寫 4 彈性效果和手風琴效果的練習 1 平移 transform translate x,y 2 旋 transform rotate 45deg 3 縮放 transfo...

複習(css過渡與動畫)

用於在乙個屬性中設定四個過渡屬性。div div hover 效果 當滑鼠移上去的時候這個正方形的寬度會增加 300 畫素 實現四個功能 旋轉,傾斜,縮放,位移 div div hover translate x y 位移 rotate 旋轉 transform rotate 角度deg 負 右 正...

css的過渡與漸變

漸變 一 線性漸變 從乙個方向到另乙個方向的顏色的變化。標準模式的語法 不新增瀏覽器字首 background linear gradient direction,color stop1,color stop2,說明 direction 預設為to bottom,即從上向下的漸變 stop 顏色的分...