整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
瀏覽網頁的時候，經常會看一些模擬開關，它的功能也各不相同，比如看視頻時的開關燈按鈕、移動端APP里的功能開關等，那么下面我們來一下它是怎么實現的呢？
首先附上效果圖
模擬開關
主要用到CSS3中的:checked、:before、:after選擇器以及其它的一些動畫過渡效果。
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>
怎么樣，是不是很簡單呢？動手做一下把！
勿忘初心，方得始終
如果你喜歡這篇文章的話，可以關注作者頭條公眾號，每天都會有精彩web干貨與你一起分享哦！
天給大家帶來是一個開關鎖，看一下效果。
·18移過去，它是一種開鎖的狀態，大家也可以通過gs部分來控制，我用的是cs部分來控制的。
·看一下代碼區域，我的開發工具又是hprx開發uni app的，大家可以看到用一個box寫了一個vivo式圖容器，然后再vlog進行關聯，里面有一個svg圖片，這svg圖片就是鎖的圖標，我沒有引用，現成的只是用svg進行編寫的，大家可以看到，而且注視也寫的很清楚。
·它一個主體形狀，鎖定的圖形，鎖臉的圖形，翻轉動畫，旋轉動畫等等，再形成這種六十度容器里面的樣式，大家可以看一下。
·gs部分我留的是空的，大家可以有點基礎的可以用gs部分來點擊控制，毀掉都可以自己去動手去寫一下，也可以用gs部分來控制。
·cs部分首先定了一個box整體的容器樣式，隱藏了一個附選框，用第二層的local lobber看一下，就是lobber的樣式進行了一個寬高，就是下面鎖芯這個位置的寬度高度圓角，鼠標移過去以后手型的形狀定義的，大家看注視就知道了。
·下面就是旋轉的內部元素，大家看到主要是左傾斜十度，包括居中，下面就是鎖鏈的部分，鎖鏈的部分大家可以也可以看一下，但是左右寬高進行設置，加了一個平滑過渡的效果。
·下面這個就是s圖形的寬度，下面就是這三個，大家可以看到，這兩個大家可以看到當鼠標停在logo lober的區域后，power是一個鼠標懸停，發生回調，然后進行翻轉鎖鏈和翻轉右側，更改背景顏色和縮小鎖定的圖標，所以形成了鼠標移過去和這種開鎖的狀態。
如果喜歡的同學可以點贊收藏一下，也可以幫忙轉發，也可以自己動手去寫一下，想要原代碼的不想寫的可以找我進行去獲取或點擊下方都可以。
今天的開關鎖就介紹到這，感謝大家。
一直想把B站作為視頻托管的地方，服務器的磁盤和帶寬畢竟有限，個人博客來說不太適合放太多的視頻。所以就想把B站作為托管視頻的地方，B站也有網頁的內嵌代碼，但是放到自己的網站上很難看，不能自適應界面大小，而且不支持高清播放，默認360p，一旦更改便會跳轉至B站，這明顯不是我們想要的。
獲取代碼
獲取內嵌代碼
B站的嵌入代碼因為功能不太完善，所以不是很好使用，在這里只要得到B站中視頻的鏈接（src后面的鏈接），將之加到如下的代碼中，就能獲得一個自適應屏幕并且支持高清播放的代碼了。
其中high_quality=1，danmaku=0是清晰度和彈幕的開關，1=表示開，0表示關閉
<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>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
