css動畫基礎屬性

2022-09-10 12:36:18 字數 3940 閱讀 5771

這是我收集的動畫基礎屬性,一些可能會出問題的地方也新增了標記,幫助我記憶,也希望幫助有需要的你們(*^o^)人(^o^*)   

background

設定背景

background-color

設定背景顏色

background-position

設定背景定位

background-size

設定背景大小

border

設定邊框

border-bottom

設定邊框底部

border-bottom-color

設定邊框底部顏色

border-bottom-left-radius

設定左下角邊框形狀

border-bottom-right-radius

設定右下角邊框形狀

border-bottom-width

設定邊框底部寬度

border-color

設定邊框顏色

border-left

設定左邊框

border-left-color

設定左邊框顏色

border-left-width

設定左邊框寬度

border-right

設定右邊框

border-right-color

設定右邊框顏色

border-right-width

設定右邊框寬度

border-spacing

設定相鄰單元格的邊框間距離  ๑乛◡乛๑(僅用於邊框分離)

border-top

設定邊框頂部

border-top-color

設定邊框頂部顏色

border-top-left-radius

設定左上角邊框形狀

border-top-right-radius

設定右上角邊框形狀

border-top-width

設定邊框頂部寬度

bottom

影象底部  ๑乛◡乛๑(

對於絕對定位元素,bottom屬性設定單位高於/低於包含它的元素的底邊。

對於相對定位元素,bottom屬性設定單位高於/低於其正常位置的元素的底邊。

)box-shadow

設定乙個或多個下拉框陰影的框

clip

讓你指定乙個絕對定位的元素,該尺寸應該是可見的,該元素被剪裁成這種形狀並顯示

color

指定文字顏色

column-count

指定某個元素應分為的列數

column-gap

指定的列之間的間隙

column-rule

列之間的寬度,樣式和顏色

column-rule-color

指定列之間的顏色規則

column-rule-width

指定列之間的寬度規則

column-width

指定列的寬度

columns

是乙個速記屬性設定列寬和列數  ๑乛◡乛๑( column-width 與 column-count 的簡寫屬性)

filter

定義了元素  ๑乛◡乛๑(通常是

)的可視效果(例如:模糊與飽和度

)flex

用於設定或檢索彈性盒模型物件的子元素如何分配空間  ๑乛◡乛๑(是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性;注意:如果元素不是彈性盒模型物件的子元素,則 flex 屬性不起作用。)

flex-basis

用於設定或檢索彈性盒伸縮基準值

flex-grow

屬性用於設定或檢索彈性盒子的擴充套件比率

flex-shrink

指定了 flex 元素的收縮規則

flex 元素僅在預設寬度之和大於容器的時候才會發生收縮,其收縮的大小是依據 flex-shrink 的值。

font

在乙個宣告中設定所有字型屬性

注意: line - height屬性設定行與行之間的空間

font-size

設定字型大小

font-size-adjust

控制字型大小,有備無患  ๑乛◡乛๑(當第乙個不能用時,使用第二個字型)

font-stretch

允許你使文字變寬或變窄

font-weight

設定文字的粗細

height

設定元素的高度  ๑乛◡乛๑

( height屬性不包括填充,邊框,或頁邊距)

left

規定元素的左邊

letter-spacing

增加或減少字元間的空白  ๑乛◡乛๑(字元間距)

line-height

設定以百分比計的行高

margin

所有外邊距屬性  ๑乛◡乛๑

(注意: 負值是允許的)

margin-bottom

設定元素的下邊距

margin-left

設定元素的左邊距

margin-right

設定元素的右邊距

margin-top

設定元素的上邊距

max-height

設定元素的最大高度

max-width

設定元素的最大寬度

min-height

設定元素的最小高度

min-width

設定元素的最小寬度

opacity

設定乙個元素了透明度級別

order

設定或檢索彈性盒模型物件的子元素出現的

順序๑乛◡乛๑注意:如果元素不是彈性盒物件的元素,則 order 屬性不起作用

outline

在乙個宣告中設定所有的輪廓屬性

outline-color

設定輪廓顏色

outline-offset

設定輪廓框架在 border 邊緣外的偏移

outline-width

設定輪廓的寬度

padding

在乙個宣告中設定所有填充屬性

๑乛◡乛๑注意: 負值是不允許的

padding-bottom

設定乙個元素的底部填充

padding-left

設定乙個元素的左部填充

padding-right

設定乙個元素的右部填充

padding-top

設定乙個元素的頂部填充

perspective

允許你改變3d元素是怎樣檢視透檢視

๑乛◡乛๑perspective 屬性只影響 3d 轉換元素。

perspective-origin

允許你改變 3d 元素的底部位置

right

設定元素的右邊

text-decoration-color

規定文字修飾 (下劃線 underline、上劃線 overline、中劃線 line-through)的顏色

๑乛◡乛๑注意:只有在帶有可見的 text-decoration 的元素上,text-decoration-color 屬性才起作用

text-indent

首行文字縮排

text-shadow

陰影文字

to設定元素頂部

transform

元素的2d或3d轉換  ๑乛◡乛๑

(元素旋轉,縮放,移動,傾斜等)

transform-origin

允許您更改轉換元素的位置

vertical-align

設定乙個元素的垂直對齊方式

visibilit

定乙個元素是否是可見的

width

設定元素的寬度

๑乛◡乛๑(width屬性不包括填充,邊框和頁邊距)

word-spacing

增加或減少字與字之間的空白

z-index

指定乙個元素的堆疊順序

css3動畫屬性

定義動畫 from to 等同於0 100 keyframes myfirst to webkit keyframes myfirst safari 和 chrome to 將動畫繫結到選擇器 div keyframes 規定動畫。animation 所有動畫屬性的簡寫屬性,除了 animation...

css簡單動畫(transition屬性)

使用box shadow畫赤橙黃綠藍靛紫7個弧形,拼接在一起 after偽元素寫投影樣式 彩虹和投影都有動畫 dom結構 用兩個巢狀的div容器,父容器來控制圖示顯示的位置,子容器用來寫彩虹的樣式。css樣式 1 定義父容器樣式,控制圖示位置,順便給整個頁面加個背景色,方便預覽 複製 body co...

CSS3動畫屬性

2d 3d 轉換屬性 transform 過渡屬性 transition 動畫屬性 animation transform 屬性向元素應用 2d 或 3d 轉換。該屬性允許我們對元素進行旋轉 縮放 移動或傾斜。2d轉換 matrix n,n,n,n,n,n 定義 2d 轉換,使用六個值的矩陣。tra...