css3新屬性學習

2021-10-05 13:59:40 字數 4198 閱讀 8804

box-size：width**

這樣就可以讓我們不必要再去計算盒子增減內邊距後有沒有撐開什麼的，因為無論內邊距如何變化，盒子的大小始終只會等於width。

filter：blur（5px）

**濾鏡，css3為我們增加了濾鏡效果，當括號中的數值越大，則越模糊。

width:calc（100%-30px）

可以自動計算盒子的寬高，根據外界的變化而動態變化自身大小，可以利用於相應式的效果製作。

transition：屬性 過度時間 過度方式(預設ease) 開始時間

過度效果常搭配於hover來使用，後倆屬性可以選填，前兩個必填。

div:


div:hover
盒子寬度由原先變為400px.用時1.5s

如果需要hover中的多個屬性一起變化，則可用all來寫第乙個屬性。若需指定屬性變化。則可transiton：width 1.5s，height 1.5s；多個過度用逗號隔開。

2d轉換

transform：translate（x,y）

translate用於盒子的移動。

translate裡面的引數可以是百分比，但百分比不是按照螢幕的百分比來計算，而是根據自身盒子的百分比來計算。

translate對於行內標籤是沒有作用的。

div:
*translate的最大優點就是可以在變形的時候不影響其他盒子，無論上天入地，皆於相鄰盒子無關。

用於盒子變形當中的盒子移動，屬性中的兩個引數分別對應x軸和y軸的偏移量，使用之前我們要了解到網頁中的xy軸是不同於我們生活當中的，網頁中的y軸是向下發展，越往下y值越大。

在布局中我們常常用到以下效果，當一行商品排列展示的時候，當我們滑鼠經過某乙個商品時，會感覺商品有上浮的感覺，我們就可以利用這一樣式轉換

div:hover
trasform：rotate（x deg）rotate是對於盒子進行旋轉，屬性單位則是通過deg度來定義，若想要盒子旋轉45度。

則可以：

transform：rotate（45deg）；
要注意的是：

角度為正則順時針旋轉，角度為負則逆時針旋轉。

預設旋轉的中心點是元素中心點。

有些案例需要在盒子的後面加上小三角圖示，以前我們只能使用icon然後通過字型圖示去實現，現在我們可以通過rotate來實現，先定義乙個小盒子，只給他定義下邊框和有邊框，然後通過旋轉45度來實現。當然我們可以結合除css3當中的偽元素選擇器，：：after，然後給他轉換為塊級元素，再定義寬高，並定位實現。

div:


:after


div:hover:


:after
transform-origin可以用來設定旋轉的中心點，屬性的引數可以是三種形式，px，百分比，方位名詞，畫素即根據座標軸找到對應的點設定為中心點，百分比則依舊 是根據自身大小的百分比計算，預設為50% 50%。方位名詞則包含left，right等等。

transform：scale(x,y)

用來對盒子進行縮放，屬性引數的單位不限，可以是px，也可以是倍數縮放，如果引數只寫乙個，則表示寬高要等比縮放，他的作用和過度效果中寫死width：***;height:***;的效果是幾乎無異的，但是使用scale的優點在於它是預設以中心點進行縮放，且不會影響其他盒子。

transform：scale（2，2）；            //盒子寬高變為原來的兩倍


transform：scale（3）； //盒子寬高同時變為原來的三倍


transform：scale（0.5，0.5）； //盒子寬高變為原來的一半


transform：scale（0.6）； //盒子寬高同時變為原來的0.6倍


div 


div img 


div img:hover
小結2d過渡是可以綜合來寫的，但是要切記將移動放在最前面，否則效果就會和我們的想象有所差異。

動畫的使用是比2d過度更加的絢麗方便，我們想要動畫效果通常分為兩部，

1.定義動畫 2.使用動畫

@keyframes move 


/*結束狀態*/


100%：


}div
我們用@keyframes ***來定義動畫，名字我們可以任意定義，定義最重要的兩個屬性就是要告訴這個動畫的開始狀態和結束狀態分別是什麼樣子的。然後秉承誰使用誰定義的原則，在需要使用動畫的盒子中通過animation-name：***和animation-duration來分別指定動畫的名稱以及動畫時長。

當然如果我們的動畫僅僅只有開始和結尾兩種狀態，我們可以使用from和to來分別代替0%和100%。

當動畫有多狀態需求時，我們可以使用百分比0%，25%，75%，100%…等等狀態，但最重要的依舊是要定義開始和結尾狀態。

動畫的屬性：

1.@keyframes                           //定義屬性


2.animation-name //定義使用動畫名


3.animation-duration //定義動畫時長


4.animation-delay //定義動畫何時開始


8.animation-play-state //定義動畫是否暫停，引數為paused，常搭配：hover來使用。
簡寫形式：運動曲線

ease      //先勻速後減速


linear //保持勻速


steps（n） //保持步長，按規定的次數完成
想要學習3d轉換，最先要了解的就是前端的三維平面圖。

用來對盒子進行三維空間上的移動，用法類似於2d移動。

perspective

3d透視效果，可以將它理解為3d眼睛，只有通過他才能看見我們的3d效果，我們通常需要將它加在父盒子上面，秉承我們的近大遠小的效果，透視的引數越小，盒子看上去越大，引數的單位為px。

transform-rotate3d（x,y,z,deg）;

這是基於3d的旋轉，誰需要旋轉在相應位置寫1，當然如果有多個值，則根據向量運算計算得出最後要旋轉的軸。

可以延三個不同的軸依次旋轉，如果再父盒子當中加上透視，3d旋轉的效果會更加明顯。

transform-rotatex（xdeg）;


//以x軸做旋轉


transform-rotatey（ydeg）;


//以y軸做旋轉


transform-rotatez（zdeg）;


//以z軸做旋轉
transform-style用於控制子盒子是否開啟3d模式，預設情況下是不開啟的，需要手動設定

CSS3學習筆記（新屬性）

1.邊框 圓角邊框 加陰影和用繪製 新增加 border radius box shadow border image div12.背景 新增加 background size background origin background clip div13 陰影 可以分為box shadow和tex...

CSS3的新屬性

1.線性漸變 linear 線性 gradient 漸變 background image webkit linear gradient top，red 50 yellow 50 yellow90 2.徑向漸變 可以設定數值 百分比 英文 background image webkit radial...

css3邊框新屬性

通過css3，可以建立圓角邊框 border radius 向矩形新增陰影 border shadow 甚至使用 border image 來繪製邊框。圓角邊框 div 取值 由浮點數字和單位識別符號組成的長度值。不可為負值。border top left radius 由浮點數字和單位識別符號組成...