自我學習第十六天 漸變 過渡 2D屬性

2021-10-22 10:16:33 字數 2341 閱讀 5333

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...