CSS3模擬IOS滑動開關效果

2024-07-11 08:32:27

字體：大中小

來源：轉載

供稿：網友

前言

H5站點需要IOS滑動按鈕的效果,想了想似乎CSS3能搞起,就折騰出來了...挺簡單的..請看注釋

效果

代碼

XML/HTML Code復制內容到剪貼板

<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8"> <title>CSS3模擬IOS開關</title>
<style type="text/css" media="screen"> /* ==========================================================================
設置根元素字體大小 ========================================================================== */
html { font-size: 100px;
} /* ==========================================================================
設置模擬元素的包裹層,裝飾...毫無卵用 ========================================================================== */
.ios-checkbox{ height:4rem;
width:4rem; position:absolute;
left:50%; top:50%;
-webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);
border:.05rem dashed #3DB7A9; display:-webkit-box;
display:-webkit-flex; display:-ms-flexbox;
display:flex; -webkit-box-orient:horizontal;
-webkit-box-direction:normal; -webkit-flex-direction:column;
-ms-flex-direction:column; flex-direction:column;
-webkit-flex-wrap:nowrap; -ms-flex-wrap:nowrap;
flex-wrap:nowrap; -webkit-justify-content:space-around;
-ms-flex-pack:distribute; justify-content:space-around;
-webkit-box-align:center; -webkit-align-items:center;
-ms-flex-align:center; align-items:center;
} /* ==========================================================================
label標簽模擬按鈕 ========================================================================== */
.emulate-ios-button { display: block;
width: 2rem; height: 1rem;
background: #ccc; border-radius: 5rem;
cursor: pointer; position: relative;
-webkit-transition: all .3s ease; transition: all .3s ease;
}
/* ========================================================================== 設置偽類,來實現模擬滑塊滑動,過渡用了transition來實現 ,
translateZ來強制啟用硬件渲染 ========================================================================== */
.emulate-ios-button:after {
content: ''; display: block;
width: .9rem; height: .9rem;
border-radius: 100%; background: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1); position: absolute;
left: .05rem; top: .05rem;
-webkit-transform:translateZ(0); transform:translateZ(0);
-webkit-transition: all .3s ease; transition: all .3s ease;
}
.emulate-ios-button:active:after { width: 1.1rem;
}
/* ========================================================================== 設置raw-checkbox,視覺直觀比較
========================================================================== */ .raw-checkbox{
height:2rem; width:2rem;
}
.raw-checkbox:checked+label { background: #34bf49;
}
/* 這里是偽元素偏移,初始是0.9+0.05 ,所以這里1.05rem */ .raw-checkbox:checked+label:after {
left: 1.05rem; }
.raw-checkbox:checked+label:active:after {
left: .5rem; }
.raw-checkbox:disabled+label { background: #d5d5d5;
pointer-events: none; }
.raw-checkbox:disabled+label:after {
background: #bcbdbc; }
</style>
</head>
<body> <div class="ios-checkbox">
<input type="checkbox" id="ios-checkbox" name="emulate-ios-button" class="raw-checkbox"> <label for="ios-checkbox" class="emulate-ios-button"></label>
</div> </body>
</html>