每日CSS 仿蘋果平滑開關按鈕

2022-06-10 02:12:08 字數 1311 閱讀 7633

原始碼

最外層 checkbox, 是按鈕的整體, inner 是on下綠色框所佔的區域, toggle 是能點選的 on 和 off 區域.

body
.checkbox
.checkbox .inner
.checkbox .inner .toggle
.checkbox .inner .toggle:before
.checkbox .inner.active .toggle:before
.checkbox .inner.active .toggle

.checkbox .inner.active

首先獲取到 inner 和 toggle, 乙個背景色框, 乙個圓形按鈕

給按鈕 toggle 註冊點選事件, 點選 on off 按鈕才有效

當 inner 處於 active, 也就是 inner 元素包含 active 類, 那就移除, 如果不包含, 那就新增, 反正做乙個相反的操作

當 inner 處於 active, toggle 會右移, inner 背景色會變換, 在 css中 設定

大功告成, 過程如下圖

仿蘋果彈性布局

在android開發中,常常會要求ios應用和android應用的體驗一致,所以對應android中開發時,很多控制項就需要開發人員自己定義,下面就為大家分享乙個仿蘋果的彈性滑動scrollview。bouncescrollview原始碼 package com.joke.widget import...

仿蘋果的全域性浮動按鈕 swift

模仿蘋果做了乙個全域性浮動按鈕,可以拖拽,可以展開和收縮,自動靠邊。實現步驟如下 2.定製按鈕樣式,通過layer層畫出五個巢狀的圓。let layer cashapelayer layer.path path.cgpath layer.fillcolor uicolor white cgfloat...

CSS流式布局 仿京東

個人自學demo。效果圖 總結 1 流式布局 寬度使用百分比。2 預設樣式 body 點選高亮我們需要清除清除 設定為transparent 完成透明 在移動端瀏覽器預設的外觀在ios上加上這個屬性才能給按鈕和輸入框自定義樣式 禁用長按頁面時的彈出選單 img,a a ul 底部有空隙 浮動引起的 ...