gsap实现台灯拉线开关点亮动画交互效果代码
代码语言: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" stroke-linecap="round" /> <path class="cord cord--rig" d="M124 187.023s17.007 21.921 17.007 34.846c0 12.925-11.338 23.231-17.007 34.846-5.669 11.615-17.007 21.921-17.007 34.846 0 12.925 17.007 34.846 17.007 34.846" stroke-width="6" stroke-linecap="round" /> <path class="cord cord--rig" d="M124 187.017s-21.259 17.932-21.259 30.26c0 12.327 14.173 20.173 21.259 30.26 7.086 10.086 21.259 17.933 21.259 30.26 0 12.327-21.259 30.26-21.259 30.26" stroke-width="6" stroke-linecap="round" /> <path class="cord cord--rig" d="M124 187s29.763 8.644 29.763 20.735-19.842 13.823-29.763 20.734c-9.921 6.912-29.763 8.644-29.763 20.735S124 269.939 124 269.939" stroke-width="6" stroke-linecap="round" /> <path class="cord cord--rig" d="M124 187.029s-10.63 26.199-10.63 39.992c0 13.794 7.087 26.661 10.63 39.992 3.543 13.331 10.63 26.198 10.63 39.992 0 13.793-10.63 39.992-10.63 39.992" stroke-width="6" stroke-linecap="round" /> <path class="cord cord--rig" d="M124 187.033V347" stroke-width="6" stroke-linecap="round" /> <line class="cord cord--dummy" x1="124" y2="348" x2="124" y1="190" stroke-width="6" stroke-linecap="round"/> </g> <path class="lamp__light" d="M290.5 193H39L0 463.5c0 11.046 75.478 20 165.5 20s167-11.954 167-23l-42-267.5z" fill="url(#light)"/> <g class="lamp__top top"> <path class="top__body" fill-rule="evenodd" clip-rule="evenodd" d="M164.859 0c55.229 0 100 8.954 100 20l29.859 199.06C291.529 208.451 234.609 200 164.859 200S38.189 208.451 35 219.06L64.859 20c0-11.046 44.772-20 100-20z" /> <path class="top__shading" fill-rule="evenodd" clip-rule="evenodd" d="M164.859 0c55.229 0 100 8.954 100 20l29.859 199.06C291.529 208.451 234.609 200 164.859 200S38.189 208.451 35 219.06L64.859 20c0-11.046 44.772-20 100-20z" fill="url(#top-shading)"/> </g> <g class="lamp__face face&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0