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

代码语言:html

所属分类:表单美化

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

代码标签: 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" />
				<stop offset="0.31" stop-color="#f0f6fe" />
				<stop offset="0.45" stop-color="#deebfe" />
				<stop offset="0.59" stop-color="#c3dbfd" />
				<stop offset="0.7" stop-color="#a8cafc" />
			</linearGradient>
		</defs>
		<rect width="100%" height="100%" fill="url(#bgGrad)" />
	</svg>

        <svg id="mainSVG" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
		<defs>

			<defs>

				<filter id="panelDropShadow" x="-100%" y="-100%" width="350%" height="350%">
					<feGaussianBlur stdDeviation="24" result="coloredBlur" />
					<feOffset dx="12" dy="24" result="offsetblur"></feOffset>
					<feFlood id="glowAlpha" flood-color="#7DA3D1" flood-opacity="0.6"></feFlood>
					<feComposite in2="offsetblur" operator="in"></feComposite>
					<feMerge>
						<feMergeNode />
						<feMergeNode in="SourceGraphic"></feMergeNode>
					</feMerge>
				</filter>


				<filter id="panelInnerShadow2" x="-100%" y="-100%" width="250%" height="250%">
					<feGaussianBlur in="SourceAlpha" stdDeviation="16" result="blur" />
					<feOffset dx="-12" dy="-8" />
					<feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowDiff" />
					<feFlood flood-color="#C2D4F5" class="buttonFlood" flood-opacity="1" />
					<feComposite in2="shadowDiff" operator="in" />
					<feComposite in2="SourceGraphic" operator="over" />
				</filter>
				<filter id="panelInnerShadow" x="-100%" y="-100%" width="250%" height="250%">
					<feGaussianBlur in="SourceAlpha" stdDeviation="16" result="blur" />
					<feOffset dx="12" dy="8" />
					<feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowDiff" />
					<feFlood flood-color="#E6F1FB" class="buttonFlood_a" flood-opacity="1" />
					<feComposite in2="shadowDiff" operator="in" />
					<feComposite in2="SourceGraphic" operator="over" />
				</filter>
				<filter id="buttonDropShadow" x="-100%" y="-100%" width="350%" height="350%">
					<feGaussianBlur stdDeviation="10" result="coloredBlur" />
					<feOffset dx="0" dy="6" result="offsetblur"></feOffset>
					<feFlood id="glowAlpha"  class="buttonDropShadowFlood" flood-color="#147FF7" flood-opacity="0.6"></feFlood>
					<feComposite in2="offsetblur" operator="in"></feComposite>
					<feMerge>
						<feMergeNode />
						<feMergeNode in="SourceGraphic"></feMergeNode>
					</feMerge>
				</filter>
				<filter id="butt.........完整代码请登录后点击上方下载按钮下载查看

网友评论0