css+svg+gsap实现粘土状弹出框按钮效果代码-html代码-BFW代码库

css+svg+gsap实现粘土状弹出框按钮效果代码

代码语言：html

代码描述：css+svg+gsap实现粘土状弹出框按钮效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
         background-color: #FFF;
         overflow: hidden;
         text-align:center;
          display: flex;
          align-items: center;
          justify-content: center; 
        }
        
        body,
        html {
         height: 100%;
         width: 100%;
         margin: 0;
         padding: 0;
        }
        
        svg {
         width: 100%;
         height: 100%;
         visibility: hidden;
         
        }
        
        #buttonPoke {
        	pointer-events: none;
        }
    </style>


</head>

<body>
    <svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
	<defs>
		<linearGradient id="checkGrad" x1="325.75" y1="231.14" x2="325.75" y2="292.14" gradientUnits="userSpaceOnUse">
			<stop offset="0" stop-color="#6fcafc" />
			<stop offset="0.4" stop-color="#69c4fa" />
			<stop offset="0.96" stop-color="#56b4f4" />
			<stop offset="1" stop-color="#55b3f4" />
		</linearGradient>
		<linearGradient id="buttonGrad" x1="400" y1="323.02" x2="400" y2="362.88" gradientUnits="userSpaceOnUse">
			<stop offset="0" stop-color="#6fcafc" />
			<stop offset="0.34" stop-color="#6ec6fa" />
			<stop offset="0.65" stop-color="#6abbf3" />
			<stop offset="0.95" stop-color="#64a9e9" />
			<stop offset="0.99" stop-color="#63a6e7" />
		</linearGradient>
		<linearGradient id="bgGrad" x1="400" y1="400" 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>
		<filter id="darkGlow" x="-100%" y="-100%" width="250%" height="250%">
			<feGaussianBlur stdDeviation="13" result=".........完整代码请登录后点击上方下载按钮下载查看