筆記：
css3漸變: 由瀏覽器生成的
線性漸變:
background: -webkit-linear-gradient(方向,顏色1,顏色2,顏色3,....顏色n);
background: linear-gradient(to 方向,顏色1,顏色2,顏色3,....顏色n);
1 單一方向漸變:
left 從左邊開始
right 從右邊開始
top 從上邊開始
bottom 從底部開始
注意: 需要新增相容字首
to left 到左邊(結束位置)
to right 到右邊
to top 到頂部
to bottom 到底部
注意: 不要新增相容字首
2 對角漸變:
left top 左上開始
left bottom 左下開始
right top 右上開始
注意: 帶相容字首
to left top 到左上(結束位置)
注意: 不帶相容字首
3 角度的漸變
10deg 10度
4 預設情況下顏色趨於均分
可以指定顏色分布的百分比,讓顏色按照百分比進行漸變
blue 10% 到10% 都是藍色
red 10px 到10px都是紅色
從乙個點到四周的漸變
background:-webkit-radial-gradient(漸變位置,形狀,大小,顏色1,顏色2,顏色3);
漸變位置: 預設從中心到四周
left 從左邊到四周的漸變
right
topbottom
left top 從左上角到四周的漸變
left bottom
right top
...10px 30px 距離左邊10px 距離上邊30px
形狀:預設橢圓 ellipse
正圓 circle
注意: 元素是正方形,則都是正圓
大小:size：漸變的大小，即漸變到**停止，它有四個值。
closest-side：最近邊；
farthest-side：最遠邊；
closest-corner：最近角；
farthest-corner：最遠角。
1: 什麼屬性在做動畫 transition-property:屬性1,屬性2,屬性3,…屬性n;
2: 過渡時間需要多久 transition-duration:2s;
3: 等待時間(可選) transition-delay:3s;
4: 動畫型別 (不寫) transition-timing-function:;
5: 綜合寫法 transition: 過渡屬性 過渡時間 延遲時間 運動型別;
css 漸變 過渡
day19 1 瀏覽器css3屬性字首 很多css3屬性，最初的預覽版沒有形成最終的正式版，但是瀏覽器為了對這些新屬性形成支援，主流瀏覽器都提供了屬於自己的語法規則 瀏覽器字首 webkit 谷歌 蘋果 瀏覽器字首 moz 火狐瀏覽器字首 ms ie瀏覽器字首 o 歐鵬瀏覽器字首 注 新增瀏覽器字首...
css的過渡與漸變
漸變 一 線性漸變 從乙個方向到另乙個方向的顏色的變化。標準模式的語法 不新增瀏覽器字首 background linear gradient direction,color stop1,color stop2,說明 direction 預設為to bottom，即從上向下的漸變 stop 顏色的分...
css 漸變過渡動畫
css3 漸變 gradients 可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。線性漸變 linear gradients 向下 向上 向左 向右 對角方向 徑向漸變 radial gradient 它們中心定義 設定形狀 shape circle 表示圓形，ellipse 表示橢圓形 預設值...