gsap实现台灯拉线开关点亮动画交互效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap实现台灯拉线开关点亮动画交互效果代码

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

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

<head>

  <meta charset="UTF-8">


  
  
<style>
*,
*:after,
*:before {
  box-sizing: border-box;
}
:root {
  --cord: hsl(210, 0%, calc((40 + (var(--on, 0) * 50)) * 1%));
  --opening: hsl(50, calc((10 + (var(--on, 0) * 80)) * 1%), calc((20 + (var(--on, 0) * 70)) * 1%));
  --feature: #0a0a0a;
  --accent: 210;
  --tongue: #e06952;
  --base-top: hsl(var(--accent), 0%, calc((40 + (var(--on, 0) * 40)) * 1%));
  --base-side: hsl(var(--accent), 0%, calc((20 + (var(--on, 0) * 40)) * 1%));
  --post: hsl(var(--accent), 0%, calc((20 + (var(--on, 0) * 40)) * 1%));
  --b-1: hsla(45, calc((0 + (var(--on, 0) * 0)) * 1%), calc((50 + (var(--on, 0) * 50)) * 1%), 0.85);
  --b-2: hsla(45, calc((0 + (var(--on, 0) * 0)) * 1%), calc((20 + (var(--on, 0) * 30)) * 1%), 0.25);
  --b-3: hsla(45, calc((0 + (var(--on, 0) * 0)) * 1%), calc((20 + (var(--on, 0) * 30)) * 1%), 0.5);
  --b-4: hsla(45, calc((0 + (var(--on, 0) * 0)) * 1%), calc((20 + (var(--on, 0) * 30)) * 1%), 0.25);
  --l-1: hsla(45, calc((0 + (var(--on, 0) * 20)) * 1%), calc((50 + (var(--on, 0) * 50)) * 1%), 0.85);
  --l-2: hsla(45, calc((0 + (var(--on, 0) * 20)) * 1%), calc((50 + (var(--on, 0) * 50)) * 1%), 0.85);
  --shade-hue: 320;
  --t-1: hsl(var(--shade-hue), calc((0 + (var(--on, 0) * 20)) * 1%), calc((30 + (var(--on, 0) * 60)) * 1%));
  --t-2: hsl(var(--shade-hue), calc((0 + (var(--on, 0) * 20)) * 1%), calc((20 + (var(--on, 0) * 35)) * 1%));
  --t-3: hsl(var(--shade-hue), calc((0 + (var(--on, 0) * 20)) * 1%), calc((10 + (var(--on, 0) * 20)) * 1%));
}
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #121921;
}
label,
input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.lamp {
  display: none;
  height: 40vmin;
  overflow: visible !important;
}
.cord {
  stroke: var(--cord);
}
.cord--rig {
  display: none;
}
.lamp__tongue {
  fill: var(--tongue);
}
.lamp__hit {
  cursor: pointer;
  opacity: 0;
}
.lamp__feature {
  fill: var(--feature);
}
.lamp__stroke {
  stroke: var(--feature);
}
.lamp__mouth,
.lamp__light {
  opacity: var(--on, 0);
}
.shade__opening {
  fill: var(--opening);
}
.shade__opening-shade {
  opacity: calc(1 - var(--on, 0));
}
.post__body {
  fill: var(--post);
}
.base__top {
  fill: var(--base-top);
}
.base__side {
  fill: var(--base-side);
}
.top__body {
  fill: var(--t-3);
}
</style>



</head>

<body>
  <form>
	<input type="radio" id="on" name="status" value="on">
	<label for="on">On</label>
	<input type="radio" id="off" name="status" value="off">
	<label for="off">Off</label>
  <svg class="lamp" viewBox="0 0 333 484" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g class="lamp__shade shade">
      <ellipse class="shade__opening" cx="165" cy="220" rx="130" ry="20"/>
      <ellipse class="shade__opening-shade" cx="165" cy="220" rx="130" ry="20" fill="url(#opening-shade)"/>
    </g>
    <g class="lamp__base base">
      <path class="base__side" d="M165 464c44.183 0 80-8.954 80-20v-14h-22.869c-14.519-3.703-34.752-6-57.131-6-22.379 0-42.612 2.297-57.131 6H85v14c0 11.046 35.817 20 80 20z" />
      <path d="M165 464c44.183 0 80-8.954 80-20v-14h-22.869c-14.519-3.703-34.752-6-57.131-6-22.379 0-42.612 2.297-57.131 6H85v14c0 11.046 35.817 20 80 20z" fill="url(#side-shading)"/>
      <ellipse class="base__top" cx="165" cy="430" rx="80" ry="20"/>
      <ellipse cx="165" cy="430" rx="80" ry="20" fill="url(#base-shading)"/>
    </g>
    <g class="lamp__post post">
      <path class="post__body" d="M180 142h-30v286c0 3.866 6.716 7 15 7 8.284 0 15-3.134 15-7V142z" />
      <path d="M180 142h-30v286c0 3.866 6.716 7 15 7 8.284 0 15-3.134 15-7V142z" fill="url(#post-shading)"/>
    </g>
    <g class="lamp__cords cords">
      <path class="cord cord--rig" d="M124 187.033V347" stroke-width="6&q.........完整代码请登录后点击上方下载按钮下载查看