无div纯css实现一个可爱电灯泡点击发亮动画效果代码-html代码-BFW代码库

无div纯css实现一个可爱电灯泡点击发亮动画效果代码

代码语言：html

代码描述：无div纯css实现一个可爱电灯泡点击发亮动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
:root {
  --unit: 1vmin;
  --bulb--one: hsla(210, 20%, 90%, 1);
  --bulb--two: hsla(210, 20%, 75%, 1);
  --bulb--three: hsla(210, 0%, 100%, 1);
  --bulb--four: hsla(210, 10%, 50%, 0.5);
  --cap--one: hsl(36, 22%, 9%);
  --cap--two: hsl(33, 74%, 28%);
  --cap--three: hsl(36, 69%, 37%);
  --cap--four: hsl(48, 100%, 94%);
  --cap--five: hsl(48, 100%, 90%);
  --connector: hsl(0, 0%, 90%);
  --pupil: hsl(0, 0%, 100%);
  --feature: hsl(0, 0%, 10%);
  --glow: transparent;
}

html {
  font-size: var(--unit);
}

body {
  margin: 0;
  padding: 0;
  cursor: pointer;
  background-color: hsl(205, 30%, 24%);
}

/* body:after {
  display: none;
} */

body:before {
  --filament--left: linear-gradient(75deg, transparent 0 48%, var(--bulb--four), transparent 52% 100%) 13.25em 22em / 8em 8em;
  --filament--right: linear-gradient(-75deg, transparent 0 48%, var(--bulb--four), transparent 52% 100%) 18.75em 22em / 8em 8em;
  --filament--wire: linear-gradient(var(--bulb--four), var(--bulb--four)) 50% 23em / 7em 0.25em;
  --filament--body: linear-gradient(90deg, var(--bulb--two) 5%, var(--bu.........完整代码请登录后点击上方下载按钮下载查看