js+css实现点击产生电流给插座充电动画效果代码-html代码-BFW代码库

js+css实现点击产生电流给插座充电动画效果代码

代码语言：html

所属分类：动画

代码描述：js+css实现点击产生电流给插座充电动画效果代码，点击按钮产生电流。

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

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

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

  
  
  
<style>
@font-face {
    font-family: 'Departure Mono';
    src:  url('//repo.bfw.wiki/bfwrepo/font/DepartureMono-Regular.woff2') format('woff2');
}
*{ box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth;}
html, body { height: 100%; overflow: hidden;}

body {
    font-family: Departure Mono;
    background: #1e1e1e;
    background: linear-gradient(28deg, #111, #272727);
    color: #fff;
    position: relative;
    height: 100%;
}

.face {
    --xv: 0; --yv: 0;
    background: #141414;
    background: #fff1;
    background-image: radial-gradient(transparent 1px, #111 0);
    background-size: 3px 3px;
    font-weight: 1000;
    position: absolute; margin: auto;
    left: 0; right: 0;top: 0;bottom: 3em;
    width: 3em; height: 3em;
    border-radius: 10px;
    border: 1px solid #fff2;
    display: flex;
    justify-content: center; align-items: center;
    padding-top: 1em;
    overflow: hidden;
    user-select: none; 
    box-shadow: 
    0px 0px 0px 2px #0005,
    0px 0px 0px 1px #fff3,
    -2px 2px 2px -1px #000,
    0px 0px 12px 0px #fff0,
    inset -2px 2px 3px -2px #fffa;
    cursor: pointer;
    transition: all 0.4s ease-out;

    backdrop-filter: blur(10px);
    perspective: 1000px;
}
.face #eyel { translate: 0 -1em; }
.face #eyer { translate: 0 -1em; }

body:has( .pwr-btn:not(.empty) ) .face {
    box-shadow: 
    0px 0px 0px 2px #0005,
    0px 0px 0px 1px #fff3,
    -2px 2px 2px -1px #000,
    0px 0px 12px 0px #fff2,
    inset -2px 2px 3px -2px #fffa;
}

.face > * {
    text-shadow: 
    -3px 3px 3px #000c,
    0 1px 12px #fffa,
    0 0 5px #fff;
}
body:has( .pwr-btn:not(.empty) ) .face:hover > * {
    transform: translateX(calc(var(--yv) * 0.2px)) translateY(calc(var(--xv) * -0.2px));
    transition: all 0.4s ease-out;
}
body:has( .pwr-btn.empty ) .face > * {
    opacity: 0.2;
}
.face::before {
    content: '';
    display: block;
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;   
    box-shadow: 
    inse.........完整代码请登录后点击上方下载按钮下载查看