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.98-4.8-6.19-9.77-2.39-3.7-4.83-6.84-7.34-9.43l3.34-.26,3.9,5.5,7.5,11.75,11.04,17.29c5.35,7.84,10.87,15.56,16.57,23.15,.44,.59,1,1.01,1.68,1.27l.46,.54,10.33,10.25c.15,2.05,1.02,3.63,2.62,4.73l2.73,3.93c.13,.19,.12,.45-.02,.66-.13,.19-.17,.41-.12,.68Z" style="fill: #121111;"/>
      <path d="M115.28,18.3c-5.05-3.49-9.19-7.93-12.41-13.33l9.54,9.47c.98,1.31,2.07,2.42,3.27,3.31,1.09,.81,.07,.88-.4,.55Z" style="fill: #171717;"/>
      <path d="M59.12,16c4.72,4.79,4,5.1-2.15,.94-.99-.67-1.83-.99-2.52-.94l-1.58-2.25c.37-1.95,5.03,1.83,6.25,2.25Z" style="fill: #b1b1b0;"/>
      <path d="M60.83,21.66c2.98,3.18,5.43,6.63,7.36,10.34,.1,.19,.09,.41-.02,.5-.03,.02-.05,.03-.09,.03h-.22c-.1,.01-.23-.07-.33-.21-.63-.87-1.42-1.57-2.37-2.11-.76-.77-1.68-1.16-2.75-1.17-2.67-3.14-3.6-7.3-6.04-10.54,.94-1.24,3.12,2.11,4.46,3.16Z" style="fill: #c4c4c4;"/>
      <path d="M54.41,26.96l3.5,3.58c.15,.76,.5,1.41,1.05,1.94,.3,.29,.49,.59,.52,.81,.07,.49-.19,.73-.78,.71-.37-.28-7.42-7.02-4.29-7.04Z" style="fill: #696969;"/>
      <path d="M62.41,29.04c1.07,.01,1.99,.4,2.75,1.17-.61,1.12,1.35,2.76,.59,2.8-.22,.01-.44-.08-.6-.24l-1.7-1.77c-.62-.52-.97-1.17-1.04-1.96Z" style="fill: #747373;"/>
      <path d="M169.45,63.56c-4.06-.61-8.05-1.37-11.96-2.26-3.14-.72-5.83-2.31-8.83-3.59-2.39-1.27-4.35-2.98-5.86-5.13-4.05-5.76-8.19-9.49-14.9-12.04-3.05-1.16-5.21-3.19-6.49-6.08l5.96,3.79c5.12,3.29,9.79,5.09,14.14,10.32,1.96,2.35,2,5.41,6.4,5.72-1.37,.99-1.12,1.72,.75,2.17,4.36,2.8,7.12,3.67,12.95,4.69,2.63,.45,5.24,1.26,7.84,2.41Z" style="fill: #1c1c1c;"/>
      <path d="M169.45,63.56c-2.6-1.15-5.21-1.96-7.84-2.41-5.83-1.02-8.59-1.89-12.95-4.69,.45-.66,.53-1.3,.25-1.92,1.36-.51,2.78-.6,4.25-.25,2.28,.48,18.44,5.84,16.29,9.27Z" style="fill: #d4d4d4;"/>
      <path d="M148.66,56.46c-1.87-.45-2.12-1.18-.75-2.17,.31,.15,.65,.24,1,.25,.28,.62,.2,1.26-.25,1.92Z" style="fill: #676666;"/>
      <path d="M26.91,301.24c.23-.2,.46-.39,.69-.57-.19,.19-.42,.38-.69,.57Z" style="fill: #565555;"/>
      <path d="M152.31,72.28l-3.11-2.53-10.33-10.25c1.16-.45,2.53-.22,4.1,.69,5.08,2.93,8.19,6.96,9.34,12.09Z" style="fill: #e4e4e4;"/>
      <path d="M159.35,80.06c1.11,1.2,.88,2.5-.73,.75-2.11-2.29-4.38-4.4-6.8-6.33-1.6-1.1-2.47-2.68-2.62-4.73l3.11,2.53,4.6,2.26,3.85,3.12c-2.08,.37-2.55,1.17-1.41,2.4Z" style="fill: #434242;"/>
      <path d="M160.76,77.66l-3.85-3.12c3.11,1.06,5.85,2.8,8.22,5.21,2.65,3.04-4.13-1.93-4.37-2.09Z" style="fill: #dcdcdb;"/>
      <path d="M88.66,76.18c-.15,10.49,1.27,20.76,4.27,30.81,.61,2.03,1.45,3.95,2.52,5.76-.34,1.19-.08,2,.77,2.44,1.77,3.63,3.38,7.26,4.82,10.89,2.28,5.77,4.89,11.36,7.83,16.77,4.95,8.34,11.82,13.9,18.46,21.74,.28,2.17,1.04,4.14,2.29,5.91-7.06-3.93-11.25-10.49-15.02-17.27-1.93-3.48-4.22-5.61-6.62-8.58-.22-.27-.39-.25-.51,.07-.91,2.4-.87,4.77,.12,7.1,.41,.95,2.24,2.09,.59,2.93-.25,.12-.56,.01-.69-.25-1.36-2.67-1.82-5.5-1.37-8.5l.42-4.36c.04-.46-.07-.93-.3-1.33-1.65-2.79-3.13-5.48-4.43-8.09-2.01-4.04-3.52-9.53-5.85-14.18-.13-.27-.96-1.24-.83-.06,1.19,11.56,3.19,22.98,5.99,34.27,1.21,7.51,2.14,12.01,2.79,13.5,1.53,3.52,2.54,7.19,3.04,11-.06,1.38,.33,2.58,1.16,3.59l.62,5.41,1.61,13c-.91-.15-1.57-.49-1.97-1-.31-5.84-1.37-11.54-3.17-17.11-.08-.25-.25-.43-.44-.45-2.11-.31,.78,12.75,1.36,14.31-.27,.22-.58,.3-.92,.25-1.91-3.25-2.76-6.41-2.54-9.5,.05-.64-.03-1.07-.23-1.28-.26-.27-.45-.17-.58,.32-.87,3.25-2.25,6.67-4.14,10.24-.17,.32-.27,.3-.32-.06-.77-6.41,.06-12.11,2.48-17.08,.15-.3,.2-.63,.15-.94-.64-4.3-1.66-9.64,.08-13.78,.5-1.19,.58-2.4,.25-3.64-2.83-10.51-5.24-21.18-7.23-32.03-1.54-10.74-3.7-21.33-6.49-31.78-1.05-6.49-.38-12.84,2.03-19.04Z" style="fill: #121111;"/>
      <path d="M40.95,80.25c.12,1.79,.58,3.44,1.39,4.95,1.7,3.17,2.34,4.78,3.34,7.52,.11,.3,0,.62-.24,.76-.64,.37-1.2,.25-1.69-.37-.2-.26-.47-.45-.77-.54-2.58-.85-.9-3.79-3.28-5.07,1.25-2.24,1.67-4.66,1.25-7.25Z" style="fill: #2e2e2e;"/>
      <path d="M41.66,95.04c4.01,.76,6.26,3.14,6.76,7.15,.03,.25,.15,.55,.35,.91,.19,.33,.24,.65,.14,.96-.07,.21-.3,.31-.51,.23-.05-.02-.1-.05-.15-.08l-6.05-5.21-.54-3.96Z" style="fill: #767575;"/>
      <path d="M49.64,157.44c-.52-.38-.89-1.02-1.11-1.91-1.39-5.68-3.6-11.08-6.62-16.2-.31-.51-.48-.47-.51,.12l-2.95,46.3-.28,12.59c-2.12,1.83-3.81,4.37-5.06,7.63,2.63-7.41,3.63-14.98,3.01-22.72,1.28-13.1,1.46-26.66,1.95-39.32,.22-5.56,.31-11.12,.28-16.68l4.34-18.99c-.69,9.59-.7,17.67-.03,24.24,.55,5.39,4.1,11.14,5.55,15.1,1.1,3.01,1.85,6.13,2.26,9.35,.11,.81-.17,.98-.83,.49Z" style="fill: #121111;&q.........完整代码请登录后点击上方下载按钮下载查看