這是我收集的動畫基礎屬性,一些可能會出問題的地方也新增了標記,幫助我記憶,也希望幫助有需要的你們(*^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...