gsap实现粘土态checkbox开关效果代码-html代码-BFW代码库

gsap实现粘土态checkbox开关效果代码

代码语言：html

代码描述：gsap实现粘土态checkbox开关效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
         background-color: #FFF;
         overflow: hidden;
         text-align:center;
          align-items: center;
          justify-content: center; 
        }
        
        #container {
        display: grid;
          place-items: center;
          grid-template-areas: "inner-div";
         height: 100%;
         width: 100%;}
        
        body,
        html {
         height: 100%;
         width: 100%;
         margin: 0;
         padding: 0;
        }
        #bgSVG {
        	grid-area: inner-div;
        	width: 100vw;
        	height: 100vh;
        }
        
        #mainSVG {
        	grid-area: inner-div;
         width: 100%;
         height: 100%;
         visibility: hidden;
         
        }
        
        #buttonPoke {
        	pointer-events: none;
        }
    </style>


</head>

<body>
    <div id="container">
        <svg id="bgSVG" xmlns="http://www.w3.org/2000/svg">
		<defs>
			<filter id="goo">
				<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
				<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -9" result="cm" />
				<feBlend />
			</filter>

			<linearGradient id="bgGrad" x1="400" y1="600" x2="400" gradientUnits="userSpaceOnUse">
				<stop offset="0" stop-color="#fff" />
				<stop offset="0.16" stop-color="#fbfdff" .........完整代码请登录后点击上方下载按钮下载查看