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