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 243.4 Q611.3 257.15 621.1 266.95 631.25 277 645.5 277 659.8 277 669.9 266.95 680 256.85 680 242.5 L680 241.65 680 119.65 Q680.3 105.95 690.1 96.1 700.25 86 714.5 86 728.8 86 738.9 96.1 748.7 105.95 749 119.65 L749 243.4 Q749.3 257.15 759.1 266.95 769.25 277 783.5 277 797.8 277 807.9 266.95 818 256.85 818 242.5 L818 241.65 818 119.65 Q818.3 105.95 828.1 96.1 838.25 86 852.5 86 866.8 86 876.9 96.1 886.7 105.95 887 119.65 L887 243.4 Q887.3 257.15 897.1 266.95 907.25 277 921.5 277 935.8 277 945.9 266.95 956 256.85 956 242.5 L956 241.65 956 119.65 Q956.3 105.95 966.1 96.1 976.25 86 990.5 86 1004.8 86 1014.9 96.1 1024.7 105.95 1025 119.65 L1025 243.4 Q1025.3 257.15 1035.1 266.95 1045.25 277 1059.5 277 1073.8 277 1083.9 266.95 1094 256.85 1094 242.5 L1094 241.65 1094 119.65 Q1094.3 105.95 1104.1 96.1 1114.25 86 1128.5 86 1142.8 86 1152.9 96.1 1162.7 105.95 1163 119.65 L1163 243.4 Q1163.3 257.15 1173.1 266.95 1183.25 277 1197.5 277 1211.8 277 1221.9 266.95 1232 256.85 1232 242.5 L1232 241.65 1232 87"/>
				<path class="outer" fill="none" stroke="#832FEB" stroke-width="42" stroke-linecap="square" stroke-linejoin="round" d="M210 87 L210 242.5 Q210 256.85 220.1 266.95 230.2.........完整代码请登录后点击上方下载按钮下载查看