瀏覽網(wǎng)頁的時(shí)候,經(jīng)常會(huì)看一些模擬開關(guān),它的功能也各不相同,比如看視頻時(shí)的開關(guān)燈按鈕、移動(dòng)端APP里的功能開關(guān)等,那么下面我們來一下它是怎么實(shí)現(xiàn)的呢?
首先附上效果圖
模擬開關(guān)
主要用到CSS3中的:checked、:before、:after選擇器以及其它的一些動(dòng)畫過渡效果。
CSS3
全部代碼
下面附上頁面源碼
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background: black;
}
* {
margin: 0;
padding: 0;
}
body {
padding: 26%;
}
.button {
display: inline-block;
position: relative;
height: 40px;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
cursor: pointer;
background-color: #eee;
border-radius: 30px;
}
input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
.button:before {
content: "";
display: inline-block;
width: 80px;
height: 42px;
background-color: #fff;
border-radius: 42px;
box-sizing: border-box;
border: 2px solid #eee;
transition: all 0.2s linear;
}
.button:after {
position: absolute;
left: 2px;
top: 2px;
content: "";
display: inline-block;
width: 38px;
height: 38px;
background-color: #fff;
border-radius: 40px;
transition: all 0.2s linear;
box-shadow: 0px 1px 3px #bbb;
}
input:checked ~ .button:before {
background-color: red;
border: 1px solid red;
}
input:checked ~ .button:after {
left: 40px;
}
</style>
</head>
<body>
<input type="checkbox" id="swtich">
<label class="button" for="swtich"></label>
</body>
</html>
怎么樣,是不是很簡單呢?動(dòng)手做一下把!
勿忘初心,方得始終
如果你喜歡這篇文章的話,可以關(guān)注作者頭條公眾號(hào),每天都會(huì)有精彩web干貨與你一起分享哦!
天給大家?guī)硎且粋€(gè)開關(guān)鎖,看一下效果。
·18移過去,它是一種開鎖的狀態(tài),大家也可以通過gs部分來控制,我用的是cs部分來控制的。
·看一下代碼區(qū)域,我的開發(fā)工具又是hprx開發(fā)uni app的,大家可以看到用一個(gè)box寫了一個(gè)vivo式圖容器,然后再vlog進(jìn)行關(guān)聯(lián),里面有一個(gè)svg圖片,這svg圖片就是鎖的圖標(biāo),我沒有引用,現(xiàn)成的只是用svg進(jìn)行編寫的,大家可以看到,而且注視也寫的很清楚。
·它一個(gè)主體形狀,鎖定的圖形,鎖臉的圖形,翻轉(zhuǎn)動(dòng)畫,旋轉(zhuǎn)動(dòng)畫等等,再形成這種六十度容器里面的樣式,大家可以看一下。
·gs部分我留的是空的,大家可以有點(diǎn)基礎(chǔ)的可以用gs部分來點(diǎn)擊控制,毀掉都可以自己去動(dòng)手去寫一下,也可以用gs部分來控制。
·cs部分首先定了一個(gè)box整體的容器樣式,隱藏了一個(gè)附選框,用第二層的local lobber看一下,就是lobber的樣式進(jìn)行了一個(gè)寬高,就是下面鎖芯這個(gè)位置的寬度高度圓角,鼠標(biāo)移過去以后手型的形狀定義的,大家看注視就知道了。
·下面就是旋轉(zhuǎn)的內(nèi)部元素,大家看到主要是左傾斜十度,包括居中,下面就是鎖鏈的部分,鎖鏈的部分大家可以也可以看一下,但是左右寬高進(jìn)行設(shè)置,加了一個(gè)平滑過渡的效果。
·下面這個(gè)就是s圖形的寬度,下面就是這三個(gè),大家可以看到,這兩個(gè)大家可以看到當(dāng)鼠標(biāo)停在logo lober的區(qū)域后,power是一個(gè)鼠標(biāo)懸停,發(fā)生回調(diào),然后進(jìn)行翻轉(zhuǎn)鎖鏈和翻轉(zhuǎn)右側(cè),更改背景顏色和縮小鎖定的圖標(biāo),所以形成了鼠標(biāo)移過去和這種開鎖的狀態(tài)。
如果喜歡的同學(xué)可以點(diǎn)贊收藏一下,也可以幫忙轉(zhuǎn)發(fā),也可以自己動(dòng)手去寫一下,想要原代碼的不想寫的可以找我進(jìn)行去獲取或點(diǎn)擊下方都可以。
今天的開關(guān)鎖就介紹到這,感謝大家。
一直想把B站作為視頻托管的地方,服務(wù)器的磁盤和帶寬畢竟有限,個(gè)人博客來說不太適合放太多的視頻。所以就想把B站作為托管視頻的地方,B站也有網(wǎng)頁的內(nèi)嵌代碼,但是放到自己的網(wǎng)站上很難看,不能自適應(yīng)界面大小,而且不支持高清播放,默認(rèn)360p,一旦更改便會(huì)跳轉(zhuǎn)至B站,這明顯不是我們想要的。
獲取代碼
獲取內(nèi)嵌代碼
B站的嵌入代碼因?yàn)楣δ懿惶晟?,所以不是很好使用,在這里只要得到B站中視頻的鏈接(src后面的鏈接),將之加到如下的代碼中,就能獲得一個(gè)自適應(yīng)屏幕并且支持高清播放的代碼了。
其中high_quality=1,danmaku=0是清晰度和彈幕的開關(guān),1=表示開,0表示關(guān)閉
<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="https://player.bilibili.com/player.html?aid=930007913&bvid=BV1aK4y1m7QE&cid=324564214&page=1&high_quality=1&danmaku=0, high_quality=1" frameborder="no" scrolling="no"></iframe>
</div>
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。