css的漸變分為兩種
線性漸變 重複線性漸變
background:linear-gradient(漸變的方向,漸變的顏色,漸變的顏色)
background:repeating-linear-gradient(漸變的方向,漸變的顏色,漸變的顏色,顏色的佔位)
水平或者垂直漸變
標準模式(不加字首)
to left 從右到左
to right 從左到右
to top 從下到上
to bottom 從上到下
相容模式(需要加字首)
left 在左邊
right 在右邊
top 在上邊
bottom 在下邊
對角漸變
to left top
to right top
to left bottom
to right bottom
相容 left top
right top
left bottom
right botton
角度值(單位deg)
標準模式:
正值順時針
負值逆時針
相容模式的角度值=90deg-=標準模式的角度值
乙個盒子兩個顏色:background: linear-gradient(to left, black 50%,green 50%);
注意:漸變的顏色是可以設定百分比的,前面的顏色的百分比可以設定自己的實色佔位,和漸變顏色佔位,後面顏色只能設定漸變色佔位
徑向漸變 重複徑向漸變
background:-webkit-redial-gradient(漸變的中心點,漸變的形狀,漸變的大小,漸變的顏色1,顏色2)
漸變的中心
center
px%漸變的形狀
正圓 circle
橢圓 ellipse
漸變的大小(和漸變的形狀不能同時使用)
怎麼設定大小的:
closest-side 最近邊
farthest-side 最遠邊
closest-corner 最近角
farthest-corner 最遠角
在一段時間內容,通過使用者的動作設定內容的屬性值改變
1、事件觸發(使用者的動作觸發)
2、初始值和最終值
transition:參與過渡的屬性 執行時間 延遲時間 速度動畫
注意漸變是不參加過渡的但是是兩個顏色的話會出現過渡的效果
參與過渡的屬性
transition-property:all
執行時間
transition-duration
延遲時間
transition-delay
速度動畫
transition-timing-function:
ease 預設
linear 勻速
ease-in 加速
ease-out 減速
ease-in-out 先加速後減速
2d屬性
位移、縮放、旋轉、傾斜
變形屬性:
transform
1、2d的位移
類似於我們的相對定位,佔位,
transform:translate(x,y)
transform:translatex(x)
transform: translatey(y)
2d的縮放(設定的是倍數,預設是中心縮放)
transform:scale(x,y)
transform: scalex(x)
transform: scaley(y)
注意:transform:scale(2)是設定x軸y軸都縮放可以設定負值,設定負值是反方向縮放
2d的旋轉
transform:rotatex(x) 上下旋轉
transform:rotatey(y) 左右旋轉
transform:rotate(順時針逆時針旋轉)
2d的傾斜
transform:skew(x,y)
transform:skewx(x)
transform:skewy(y)
注意:transform:skew(20deg)是設定x軸傾斜20deg。
改變變形的中心點
transform-origin
單詞方向
px、%
學習python 第十六天
流 i o 一 編碼 編碼明文 暗文 明文 暗文 解碼計算機只認識010101 ascii 0 127 ansi ascii加上拉丁文 gb2312 ascii加上7000多個漢字 前八位和後八位 127 gbk gb2312加上2萬多個漢字 前八位 127 unicode 國際通用 utf 8 推...
RHCE linux學習第十六天
16.1 快取服務 squid是linux系統中最為流行的一款高效能 服務軟體,通常用作web 的前置快取服務,能夠代替使用者向 伺服器請求頁面資料並進行快取。簡單來說,squid服務程式會按照收到的使用者請求向 源伺服器請求頁面 等所需的資料,並將伺服器返回的資料儲存在執行squid服務程式的伺服...
Linux 第十六天學習
一 dhcp dynamic host configuration protocol 採用udp 協議 引數 作用 ddns update style 型別 定義dns服務動態更新的型別,型別包括 none 不支援動態更新 interim 互動更新模式 與ad hoc 特殊更新模式 allow ig...