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

代码语言：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(--bulb--four) 10% 12%, var(--bulb--three) 15% 18% , var(--bulb--one) 20% 30%, var(--bulb--four) 30% 34%, var(--bulb--one) 34% 66%, var(--bulb--four) 66% 70%, var(--bulb--one) 70% 80%, var(--bulb--three) 82% 85%, var(--bulb--four) 88% 90%, var(--bulb--two) 95%) 50% 30em / 4em 6em;
  --bulb--glow: radial-gradient(var(--glow) 0 40%, transparent 60% 89%) 50% -3em / 42em 42em;
  --bulb--main: radial-gradient(var(--bulb--one) 0 45%, var(--bulb--two) 49%, transparent 50% 100%) 50% -3em / 42em 42em;
  --bulb-bottom--right: linear-gradient(128deg, var(--bulb--one) 0 36%, var(--bulb--two) 48%, transparent 50% 100%) 23.65em 28em / 8em 8em;
  --bulb-bottom--left: linear-gradient(-128deg, var(--bulb--one) 0 36%, var(--bulb--two) 48%, transparent 50% 100%) 8.35em 28em / 8em 8em;
  --bulb-bottom--center: linear-gradient(var(--bulb--one) 0 65%, var(--bulb--two) 98% 100%) 50% 28em / 9.5em 8em;
  --bulb-shine--central: radial-gradient(var(--bulb--three)0 50%, transparent 55% 100%) 50% 5em / 26em 26em;
  --bulb-shine--central-cover: radial-gradient(var(--bulb--one)0 44%, transparent 55% 100%) 50% 6em / 24em 24em;
  --bulb-shine--clip-top-right: linear-gradient(120deg, var(--bulb--one) 0 39%, transparent 60% 100%) 18em 8em / 8em 8em;
  --bulb-shine--clip-top-left: linear-gradient(-120deg, var(--bulb--one) 0 39%, transparent 60% 100%) 11em 8em / 8em 8em;
  --bulb-shine--clip-bottom-right: linear-gradient(60deg, var(--bulb--one) 0 39%, transparent 60% 100%) 19em 20em / 8em 8em;
  --bulb-shine--clip-bottom-left: linear-gradient(-60deg, var(--bulb--one) 0 39%, transparent 60% 100%) 14em 20em / 8em 8em;
  --bulb-shine--right: radial-gradient(circle at 0 50%, var(--bulb--three) 0% 40%, transparent 47% 100%) 19em -1em / 20em 38em;
  --bulb-shine--right-cover: radial-gradient(circle at 0 50%, var(--bulb--one) 0% 42%, transparent 48% 100%) 18.5em -2em / 20em 40em;
  --mouth: radial-gradient(circle at 50% 0, var(--feature) 0 50%, transparent 55% 100%) 50% 19em / 6em 2em;
  --mouth--cap: radial-gradient(circle at 50% 0, var(--bulb--one) 0 42%, transparent 43% 100%) 50% 18.75em / 6em 2em;
  --cap--top: linear-gradient(90deg, var(--cap--three) 5%, var(--cap--four) 13% 22%, var(--cap--three), var(--cap--one) 32% 54%, var(--cap--three) 60%, var(--cap--four) 74% 84%, var(--cap--three), var(--cap--one)) 50% 63.5% / 11.5em 1em;
  --cap--highlight: linear-gradient(90deg, var(--cap--three) 5%, var(--cap--five) 13% 84%, var(--cap--three), var(--cap--one)) 50% 64.5% / 11em 0.45em;
  --cap--highlight-two: linear-gradient(90d.........完整代码请登录后点击上方下载按钮下载查看