整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          CSS之模擬開關(guān)狀態(tài)的實(shí)現(xiàn)!

          CSS之模擬開關(guān)狀態(tài)的實(shí)現(xiàn)!

          瀏覽網(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>


          主站蜘蛛池模板: 国产综合无码一区二区三区| 免费看一区二区三区四区| 国产在线精品观看一区| 久久国产精品亚洲一区二区| 国产主播一区二区三区在线观看| 亚州日本乱码一区二区三区| 国产91精品一区二区麻豆亚洲| 国产午夜精品片一区二区三区| 国产一区二区精品| 一本大道东京热无码一区| 欧洲精品一区二区三区在线观看| 亚洲日韩一区精品射精| 一区二区三区视频| 竹菊影视欧美日韩一区二区三区四区五区| 亚洲熟妇av一区二区三区| 熟女性饥渴一区二区三区| 国模无码一区二区三区不卡| 国产精品毛片a∨一区二区三区| 国产一区二区三区在线看片| 国产在线精品观看一区| 日本一区二区三区在线视频| 日韩一区二区三区在线观看| 精品天海翼一区二区| 波多野结衣精品一区二区三区| 国模精品视频一区二区三区| 国产福利一区二区| 一区二区三区AV高清免费波多| 日韩熟女精品一区二区三区| 在线精品亚洲一区二区三区| 久久久不卡国产精品一区二区| 亚洲一区日韩高清中文字幕亚洲 | 国产精品美女一区二区| 日韩AV片无码一区二区不卡| 日本一区二区三区在线网| 久久99久久无码毛片一区二区| 国产在线无码视频一区二区三区| 精品国产免费一区二区三区香蕉| 国产精品视频一区二区三区四| 末成年女AV片一区二区| 女同一区二区在线观看| 亚洲av无码天堂一区二区三区 |