天給大家?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>