svg+css实现灯笼点亮开关效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：svg+css实现灯笼点亮开关效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
html, body {
    height: 100%;
}
body {
    display: flex;
    justify-content: center;
    background: rgb(244 246 248);
    background:  linear-gradient(35deg, rgb(198 206 217) 0%, rgba(199, 207, 217,0) 40%), linear-gradient(90deg, rgb(244 246 248) 0%, rgb(199 207 217) 100%);
    margin: 0;
    font-family:'poppins', sans-serif;
}
.footer{
position: absolute;
bottom: 0;
right: 0;
font-family: monospace;
color: #888;
padding: 10px;
font-size: 12px;
}
.footer a { color: #888; }
.main,
.main * {
    transition: all 0.2s ease-in-out;
}
.main {
    --window-size: 330px;
    --lantern-size: calc(var(--window-size) / 2.7);
    scale: 1;
    width: var(--window-size);
    height: var(--window-size);
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    margin: auto;
    border-radius: 4px;
    box-shadow:
    0 -70px 8px 10000px rgba(0, 0, 0, 0.7),
    inset 0 -70px 8px 0 rgba(0, 0, 0, 0.1),
    inset 0 0 calc(var(--window-size) / 2) calc(var(--window-size) / 5) rgba(0, 0, 0, 1),
    inset 0 calc(var(--window-size) / -12) calc(var(--window-size) / 10) 0 rgba(0, 0, 0, 0.2);
}
.on.main {
    box-shadow: 
    0 -70px 8px 1000px rgba(0, 0, 0, 0),
    inset 0 -70px 8px 0 rgba(0, 0, 0, 0.2),
    inset 0 0 calc(var(--window-size) / 2) 0 rgba(0, 0, 0, 1),
    inset 0 calc(var(--window-size) / -12) calc(var(--window-size) / 10) 0 rgba(0, 0, 0, 0.2);
}
.shadow {
    height: 16%;
    width: 100%;
    position: absolute;
    bottom: 4%;
    margin: auto;
    left: 0;
    right: 0;
    border-radius: 50%;
    background: radial-gradient(rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0) 70%);
    opacity: 0;
}
.on .shadow {
    opacity: 1;
}
.lantern {
    width: var(--lantern-size);
    height: calc(var(--lantern-size)*1.3);
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 10%;
    margin: auto;
    filter: brightness(0.4);
    cursor: pointer;
}
.on .lantern {
    filter: brightness(1);
}
.leaf {
    --val-x: calc(var(--lantern-size)/3);
    --val-y: calc(var(--lantern-size)/6);
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top:7%;
    bottom: 12%;
    background: #fff;
    border-radius: calc(var(--lantern-size) / 2.7);

    box-shadow: 
    inset 0  0px 1px 1px rgba(0,0,0, 0.1),
    inset 0  0px 2px 0px rgba(0,0,0, 0.2),
    inset 0  60px 10px -40px rgba(255,255,255, 0),
    inset 0  0px 140px 0px rgba(0,0,0, 0.5),
    inset 0  -60px 10px -40px rgba(0,0,0, 0.1),
    inset 0  var(--val-x) calc(0.5 * var(--val-x)) calc(-0.8*var(--val-x)) rgba(0, 0, 0, 1),
    inset 0  calc(-1*var(--val-x)) calc(0.5 * var(--val-x)) calc(-0.9*var(--val-x)) rgba(0, 0, 0, 1);
}
.on .leaf {
    box-shadow: 
    inset 0  0px 1px 1px rgba(0,0,0, 0.1),
    inset 0  0px 2px 0px rgba(0,0,0, 0.2),
    inset 0  60px 10px -40px rgba(255,255,255, 0.8),
    inset 0  0px 14px 0px rgba(0,0,0, 0.5),
    inset 0  -60px 10px -40px rgba(0,0,0, 0.1),
    inset 0  var(--val-x) calc(0.5 * var(--val-x)) calc(-0.8*var(--val-x)) rgba(0, 0, 0, 1),
    inset 0  calc(-1*var(--val-x)) calc(0.5 * var(--val-x)) calc(-0.9*var(--val-x)) rgba(0, 0, 0, 1);
}
.leaf > .leaf {
    left: 0;
    right: 0;
    top:0%;
    bottom: 0%;
    border-radius: 40%;
}
.leaf > .leaf { scale: 0.95 1;}
.leaf > .leaf > .leaf { scale: 0.87 1;}
.leaf > .leaf > .leaf > .leaf { scale: 0.8 1;}
.leaf > .leaf > .leaf > .leaf > .leaf { scale: 0.7 1;}
.leaf > .leaf > .leaf > .leaf > .leaf > .leaf { scale: 0.54 1;}
.leaf > .leaf > .leaf > .leaf > .leaf > .leaf > .leaf { scale: 0.07 1;}

svg#Layer_1 {
    width: 100%;
    height: 70%;
    left: -20%;
    position: absolute;
    filter: brightness(0.2);
    overflow: visible;
}
.on svg#Layer_1 {
    filter: brightness(1);
}
svg#Layer_1 > *{
    filter: drop-shadow(-100px 10px 10px rgba(0,0,0,0));
}
.on svg#Layer_1 > *{
    filter: drop-shadow(-100px 10px 10px rgba(0,0,0,1));
}
.top {
    background: rgb(18,17,17);
    background: linear-gradient(90deg, rgba(18,17,17,1) 0%, rgba(80,80,80,1) 20%, rgba(20,19,19,1) 31%, rgba(31,30,30,1) 42%, rgba(122,122,122,1) 55%, rgba(114,114,114,1) 60%, rgba(108,108,108,1) 61%, rgba(27,26,26,1) 70%, rgba(27,26,26,1) 81%, rgba(69,69,69,1) 90%, rgba(27,26,26,1) 97%);
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top:22%;
    width: 16%;
    height: 3%;
    border-radius: 16%;
    filter: brightness(0.2);
}
.on .top {
    filter: brightness(1);
}
.top-line {
    background: rgb(18,17,17);
    box-shadow: 
    inset 1px 0 1px 0px rgb(18,17,17),
    inset 1px 0 2px 0px rgba(226, 226, 226, 1),
    inset 0 0 0 3px rgb(18,17,17);
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top:0%;
    width: 0.7%;
    height: 14%;
    filter: brightness(0.2);
}
.on .top-line {
    filter: brightness(1);
}
.top-circle {
    background: transparent;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top:14%;
    box-shadow: 
    0px -1px 1px 0.5px rgba(226, 226, 226, 0.7),
    0px 1.5px 1px 0.5px rgb(226, 226, 226),
    -0.5px -0.5px 0.5px 3px rgb(18,17,17),
    0px 0px 1px 3px rgb(226, 226, 226),
    0 0 0 3px rgb(18,17,17);
    width: 8%;
    height: 8%;
    border-radius: 50%;
    filter: brightness(0.2);
}
.on .top-circle {
    filter: brightness(1);
}
.bottom {
    background: rgb(18,17,17);
    background: linear-gradient(90deg, rgba(18,17,17,1) 0%, rgba(80,80,80,1) 20%, rgba(20,19,19,1) 31%, rgba(31,30,30,1) 42%, rgba(122,122,122,1) 55%, rgba(114,114,114,1) 60%, rgba(108,108,108,1) 61%, rgba(27,26,26,1) 70%, rgba(27,26,26,1) 81%, rgba(69,69,69,1) 90%, rgba(27,26,26,1) 97%);
    filter: brightness(0.4);
    transform: matrix3d(1,0,0.00,0,0.00,0.71,0.71,0,0,-0.71,0.71,0,0,0,0,1);
    -webkit-transform: matrix3d(1,0,0.00,0,0.00,0.71,0.71,0,0,-0.71,0.71,0,0,0,0,1);
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top:62.4%;
    width: 14%;
    height: 2.5%;
    border-radius: 16%;
    filter: brightness(0.2);
}
.on .bottom {
    filter: brightness(1);
}
</style>

  
</head>

<body >
  <div class="main">
    <?xml version="1.0" encoding="UTF-8"?>
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 169.65 460.01">
      <path d="M47.04,76.81c-.2,.29-.33,.26-.39-.11-.65-4-1.85-7.67-3.6-11.01-.89-1.69-1.19-1.59-.89,.29,.4,2.56,3.62,15.67,2.5,16.98-2.48-.16-4.45-22.81-5.64-23.14-.03-.01-.07-.01-.1,0t-.02,.01s-.03,.01-.05,.03c-.02,.02-.05,.04-.06,.07-.02,.03-.04,.06-.05,.1-.01,.02-.02,.05-.03,.08-.01,.04-.02,.08-.02,.13-.01,.06-.01,.12,0,.18l2.26,19.83c.07,.41,.11,.81,.14,1.21,.13,2.14-.34,4.15-1.39,6.04-.89,2.99-.24,5.51,1.96,7.54l.54,3.96,.49,9.26-4.34,18.99c-2.17,6.66-4.94,13.09-6.05,19.9-.79,4.9-.99,12.48-2.93,16.85-.48,0-.73-.25-.75-.75,.44-1.55,.7-3.64,.79-6.25,.09-2.87,.7-6.82,1.81-11.84,.17-.77,.06-.85-.33-.24-2.54,4-4.46,8.28-5.77,12.83-.69,.36-1.35,.36-2,0,.19-2.61,.81-4.76,1.85-6.44,6.27-10.13,11.81-21.23,12.54-32.98,.72-11.71,.21-22.31-.39-38.08-.57-8.33-.9-16.66-.99-25.01-.03-2.35-.34-5.11-.91-8.26-.88-4.84-1.23-9.75-1.04-14.73-.33-5.51-1.19-10.91-2.58-16.21-.08-.29,.05-.6,.3-.74l1.24-.65c.3-.15,.48-.43,.49-.72l.34-13.93h4c-.05,6.27-.07,12.55-.06,18.82,0,1.02,.71,1.78,.66,2.88-.31,6.87-.1,13.72,.63,20.55,.01,1.97,.12,3.92,.35,5.87,.71,6.28-1.05,10.12,3.86,15.42,1.36,2.35,5.25,10.92,3.63,13.27Z" style="fill: #090909;"/>
      <path d="M42.97,0h2.5c.11,.75,.41,1.41,.9,2,.35,1.23,.75,2.44,1.18,3.65,1.04,2.89,3.62,5.45,5.32,8.1l1.58,2.25c.31,1.07,.95,1.9,1.92,2.5,2.44,3.24,3.37,7.4,6.04,10.54,.07,.79,.42,1.44,1.04,1.96-1.89,3.17-3.55-.36-5.54-.46l-3.5-3.58-1.04-1.96c-.38-1.79-1.06-3.43-2.05-4.92-2.99-4.55-5.46-9.23-6.19-14.69-.25-1.94-.97-3.74-2.16-5.39Z" style="fill: #171717;"/>
      <path d="M86.22,0h4.25c-.15,2.75-1.56,16.13-.39,17.63,.2,.26,.29,.57,.23,.86-1.23,5.94-1.65,11.92-1.24,17.94,.35,5.11-.04,9.47-.15,14.31,0,.25-.09,.57-.26,.95-.29,.65-.17,1.23,.36,1.74,.23,.22,.36,.52,.37,.82l.31,9c.19,4.36-.16,8.67-1.04,12.93-2.41,6.2-3.08,12.55-2.03,19.04l-10.76,52.28c-.89,2.31-1.82,4.6-2.8,6.87-1.17,2.71-.96,5.39-1.75,8.27-.64,2.36-.41,3.4,.42,5.55,.11,.28-.03,.6-.31,.72,0,0-.02,0-.03,.01-2.15,.72-2.98,2.4-2.49,5.03,.1,.51,.16,1.02,.19,1.54,.55,9.9,.69,19.07,.41,27.52-1.12,1.42-1.41,5.04-3.56,4.49l-1-2.99c-.08-.25,.03-.51,.25-.6,1.28-.51,1.93-1.64,1.96-3.41,.14-9.08,.46-18.45-.19-27.51-.12-1.69,.03-3.6,.44-5.74,3.69-19.11,6.46-32.83,8.33-41.18,.97-4.33,1.5-8.71,1.6-13.14,0-.31,.12-.62,.32-.9,.63-.88,1.03-1.74,1.19-2.59,2.14-11.27,4.11-18.82,4.98-28.39,.43-4.78,1.64-13.25,1.29-20.05-.56-7.14-.77-14.32-.62-21.55,.48-5.35,.62-10.75,.41-16.2-.09-2.52,.34-10.27,1.31-23.25Z" style="fill: #0d0d0d;"/>
      <path d="M154.41,79.75c.48,2.81-.19,3.4-2,1.75l-2.25-2.04c-1.85-2.46-3.27-5.14-4.28-8.05-.1-.31-.3-.57-.57-.77-2.25-1.67-4.11-3.68-5.58-6.03-.16-.25-.24-.57-.25-.93-.03-.68-.15-1.14-.38-1.37-4.3-4.37-8.11-9.09-11.43-14.14-.61-.93-.85-.85-.7,.26,.45,3.29,1.79,6.11,4.02,8.46-3.33,.96-6.11-11.99-7.87-14.39-1.36-2.31-4.21-7.53-6.44-8.85-.32-.19-.56-.43-.68-.67-2.31-4.73-5.01-9.24-8.09-13.52-.91-1.55-2.9.........完整代码请登录后点击上方下载按钮下载查看