1.漸變
線性漸變
background: linear-gradient(red, blue); 預設從上到下 可多個顏色
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 到右 透明色漸變
background: linear-gradient(to bottom right, red , blue); 到右下
background: linear-gradient(180deg, red, blue); 角度方向
background: repeating-linear-gradient(red, yellow 10%, green 20%); 重複顏色漸變 累加共20%
徑向漸變
background: radial-gradient(red, green, blue);
background: radial-gradient(red 5%, green 15%, blue 60%);
background: radial-gradient(circle, red, yellow, green); 園形
background: radial-gradient(60% 55%, closest-side/farthest- corner,blue,green,yellow,black); 尺寸
background: repeating-radial-gradient(red, yellow 10%, green 15%); 重複
2dtransform:rotate(60deg); 轉動60度
transform: translate(100px,100px); 移動
transform: scale(2,3); 縮放倍數
transform: skew(20deg,30deg); 傾斜 x:20 y:30 y可不寫
transform: skewx(20deg); 沿x軸y偏轉20度 skewy：沿y軸
transform:matrix(2,0.5,-0.5,0.866,0,0); x放大，傾斜，傾斜，y放大，x偏移，y偏移
3dtransform: rotatex(120deg);沿著x軸旋轉 rotatey
過渡transition:width 2s; 寬 變動 兩秒
:hover 游標 寬 變成300px
transition: width 2s, height 2s, transform 2s; 寬 高 轉換
:hover 寬變200 高變200 轉動180度
多列column-count: 3; 3列
column-gap: 40px; 列間距
<彈性 （pc 轉 移動 格式不變）head
>
<
meta
charset
="utf-8"
>
<
title
>無標題文件
title
>
<
style
>
pstyle
>
head
>
<
body
>
<
p>9月10日教師節這天，馬雲宣布將在一年後不再擔任阿里巴巴董事局主席，由現任集團ceo張勇接任。馬雲將回歸他一直以來最熱愛的身份——老師。這個決定看似突然，卻並不令人意外。就在幾天前（9月5日）的2018xin公益大會教育分論壇上，馬雲已經透露了今後的打算：「自己最後還是會回到老師這一行，我做老師能得心應手，而且也是性格決定的，我對很多東西充滿好奇和想象。」
p>
body
>
display: flex/inline-flex; 父元素加 放大縮小寬度 不影響布局
direction: rtl; 爺元素加 排列方式 父子 右到左
flex-direction: row-reverse; 父元素加 排列方式 子 橫向反轉 column-reverse：縱向反轉排列 column：縱向
justify-content: flex-start/center/flex-end/space-between/space-around; 左 中 右 隔開 包裹 水平 父加
align-items:flex-start/center/flex-end； 上 中 下 整體放置 父加
flex-wrap: nowrap/wrap/wrap-reverse; 單行 多行 多行反轉 子加
order: -1; 順序 小在前 子元素塊加
CSS動畫樣式
transform 對物件屬性進行動畫編輯 可用於有漸變效果的動畫 一 transition 動畫的過度效果 注 始終設定 transition duration 屬性，否則時長為 0，就不會產生過渡效果。transition的屬性值及其用法 1.transition property 規定設定過渡...
css3動畫樣式總結
語法格式 transition 要過渡的屬性 花費時間 運動曲線 何時開始 屬性描述 transition 簡寫屬性，用於在乙個屬性中設定四個過渡屬性。transition property 規定應用過渡的css屬性的名稱。transition duration 定義過渡效果花費的時間。預設是0。t...
通過css樣式實現精靈動畫
keyframes 規則用於建立動畫。在 keyframes 中規定某項 css 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。這裡用到animation來切換css的背景 第乙個引數作用於每兩個關鍵幀之間，這裡指切換方式是一幀一幀改變。第二個引數start或end，2個引數都會選擇性的跳過前後...