三维孔状开光切换动画效果代码-html代码-BFW代码库

三维孔状开光切换动画效果代码

代码语言：html

代码描述：三维孔状开光切换动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
* {
        border: 0;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
}
body, input {
        font: 80px/1.5 sans-serif;
}
body, input[type=checkbox]:before {
        background-image:
                linear-gradient(90deg,#f1f2f3 2px,#fff0 2px),
                linear-gradient(#f1f2f3 2px,#fff 2px);
        background-repeat: repeat;
        background-size: 0.75em 0.375em;
}
body {
        background-position: 50% calc(50% + 0.2em);
        display: grid;
        place-items: center;
        height: 100vh;
}
input[type=checkbox] {
        --off: #c7cad1;
        --mid: #829ad6;
        --on: #255ff4;
        --transDur: 0.5s;
        --timing: cubic-bezier(0.6,0,0.4,1);
        animation: bgOff var(--transDur) var(--timing);
        background-color: var(--off);
        border-radius: 0.67em / 0.5em;
        box-shadow:
                0 0.05em 0.1em #00000007 inset,
                0 -0.25em 0.25em #0001 inset,
                0 -0.5em 0 #0001 inset,
                0 0.1em 0.1em #0001;
        cursor: pointer;
        position: relative;
        width: 2.25em;
        height: 1.5em;
        -webkit-appearance: none;
        appearance: none;
}
input[type=checkbox]:before {
        animation: handleOff var(--transDur) var(--timing);
        background-attachment: fixed;
        background-position: 50% calc(50% - 0.1875em);
        border-radius: 0.5em / 0.375em;
        box-shadow:
                0 0.175em 0.175em 0 #0001 inset,
                0 0.375em 0 #0002 inset,
                0 0.375em 0 var(--off) inset,
                0 0.475em 0.1em #0001 inset;
        .........完整代码请登录后点击上方下载按钮下载查看