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

svg+css实现灯笼点亮开关效果代码

代码语言：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*va.........完整代码请登录后点击上方下载按钮下载查看