gsap+svg实现肠道弯曲扭动动画效果代码-html代码-BFW代码库

gsap+svg实现肠道弯曲扭动动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现肠道弯曲扭动动画效果代码

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

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

<head>
    <meta charset="UTF-8">



    <style>
        body {
        	position: relative;
        	height: 100vh;
        	margin: 0;
        	padding: 0;
        	background-color: #3F3898;
        }
        
        section {
        	width: 100%;
        	max-height: 100vh;
        	padding: 2.500rem;
        }
        
        svg {
        	display: block;
        	max-width: 100%;
        	margin: auto;
        }
        
        * {
        	box-sizing: border-box;
        }
    </style>

   


</head>

<body >
    <main class="main">
        <section class="svg-wrapper">
            <svg width="1440" height="960" viewBox="0 0 1440 960" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			<g style="opacity: 0;">
				<path class="shadow" fill="none" stroke="#EF3A59" stroke-width="42" stroke-linecap="square" stroke-linejoin="round" d="M197 87 L197 242.5 Q197 256.85 207.1 266.95 217.25 277 231.5 277 245.8 277 255.9 266.95 266 256.85 266 242.5 L266 119.65 Q266.3 105.95 276.1 96.1 286.25 86 300.5 86 314.8 86 324.9 96.1 334.7 105.95 335 119.65 L335 243.4 Q335.3 257.15 345.1 266.95 355.25 277 369.5 277 383.8 277 393.9 266.95 404 256.85 404 242.5 L404 241.65 404 119.65 Q404.3 105.95 414.1 96.1 424.25 86 438.5 86 452.8 86 462.9 96.1 472.7 105.95 473 119.65 L473 243.4 Q473.3 257.15 483.1 266.95 493.25 277 507.5 277 521.8 277 531.9 266.95 542 256.85 542 242.5 L542 241.65 542 119.65 Q542.3 105.95 552.1 96.1 562.25 86 576.5 86 590.8 86 600.9 96.1 610.7 105.95 611 119.65 L611.........完整代码请登录后点击上方下载按钮下载查看