switch開關的製作

2021-08-01 14:25:57 字數 454 閱讀 8678

html**:

css**:

效果圖: 

擴充套件:①a~b表示a之後出現的所有b,且a、b有相同的父元素。

②transition:all 0.3s ease  過渡。transition-property:all/屬性    transition-duration:多長時間完成該動畫。transition-timing-function:ease/速度曲線   transition-delay:延遲多長時間執行.

③transform:轉變。transform:translatex(x); //x軸平移     rotate(angle);//旋轉度數     scale(x,y);// 縮放    

skew(x-angle,y-angle);//傾斜轉換      matrix(n,n,n,n,n,n);//2d轉換[矩陣]

④user-select:none;表示文字不能被選中。

開關按鈕Switch

思路 自定義view,重寫和封裝好方法,外部直接呼叫 三個構造方法 onmeasure onlayout ondraw 重寫這些方法,實現自定義控制項 測量 在這個方法裡指定自己的寬高 布局 擺放 繪製內容 觸控事件ontouchevent motionevent event 封裝自定義方法 狀態更...

重構 開關Switch

收穫 當給根類設定transition ns時,當根類的屬性變化都會產生過渡態,即當再新增乙個類,這個類出現 消失會出現兩種過渡態 動畫 按鈕移動 軌道顏色漸變 引數 static proptypes 效果圖 使用 import react,from react import switch from...

JQuery實現switch開關

實現效果為如下的選擇開關 首先在布局上,可以清晰看到最外層乙個div包裹,內部兩個div組成,然後兩個div內部分別包裹了span用於顯示開關上的文字,html 如下 日同比周同比 對於該樣式的布局實現css如下 switch container switch btn left btn right ...