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.25 277 244.5 277 258.8 277 268.9 266.95 279 256.85 279 242.5 L279 119.65 Q279.3 105.95 289.1 96.1 299.25 86 313.5 86 327.8 86 337.9 96.1 347.7 105.95 348 119.65 L348 243.4 Q348.3 257.15 358.1 266.95 368.25 277 382.5 277 396.8 277 406.9 266.95 417 256.85 417 242.5 L417 241.65 417 119.65 Q417.3 105.95 427.1 96.1 437.25 86 451.5 86 465.8 86 475.9 96.1 485.7 105.95 486 119.65 L486 243.4 Q486.3 257.15 496.1 266.95 506.25 277 520.5 277 534.8 277 544.9 266.95 555 256.85 555 242.5 L555 241.65 555 119.65 Q555.3 105.95 565.1 96.1 575.25 86 589.5 86 603.8 86 613.9 96.1 623.7 105.95 624 119.65 L624 243.4 Q624.3 257.15 634.1 266.95 644.25 277 658.5 277 672.8 277 682.9 266.95 693 256.85 693 242.5 L693 241.65 693 119.65 Q693.3 105.95 703.1 96.1 713.25 86 727.5 86 741.8 86 751.9 96.1 761.7 105.95 762 119.65 L762 243.4 Q762.3 257.15 772.1 266.95 782.25 277 796.5 277 810.8 277 820.9 266.95 831 256.85 831 242.5 L831 241.65 831 119.65 Q831.3 105.95 841.1 96.1 851.25 86 865.5 86 879.8 86 889.9 96.1 899.7 105.95 900 119.65 L900 243.4 Q900.3 257.15 910.1 266.95 920.25 277 934.5 277 948.8 277 958.9 266.95 969 256.85 969 242.5 L969 241.65 969 119.65 Q969.3 105.95 979.1 96.1 989.25 86 1003.5 86 1017.8 86 1027.9 96.1 1037.7 105.95 1038 119.65 L1038 243.4 Q1038.3 257.15 1048.1 266.95 1058.25 277 1072.5 277 1086.8 277 1096.9 266.95 1107 256.85 1107 242.5 L1107 241.65 1107 119.65 Q1107.3 105.95 1117.1 96.1 1127.25 86 1141.5 86 1155.8 86 1165.9 96.1 1175.7 105.95 1176 119.65 L1176 243.4 Q1176.3 257.15 1186.1 266.95 1196.25 277 1210.5 277 1224.8 277 1234.9 266.95 1245 256.85 1245 242.5 L1245 241.65 1245 87"/>
<path class="inner" fill="none" stroke="#FB991E" stroke-width="12" stroke-linecap="square" stroke-linejoin="round" d="M210 72 L210 242.5 Q210 256.85 220.1 266.95 230.25 277 244.5 277 258.8 277 268.9 266.95 279 256.85 279 242.5 L279 119.65 Q279.3 105.95 289.1 96.1 299.25 86 313.5 86 327.8 86 337.9 96.1 347.7 105.95 348 119.65 L348 243.4 Q348.3 257.15 358.1 266.95 368.25 277 382.5 277 396.8 277 406.9 266.95 417 256.85 417 242.5 L417 241.65 417 119.65 Q417.3 105.95 427.1 96.1 437.25 86 451.5 86 465.8 86 475.9 96.1 485.7 105.95 486 119.65 L486 243.4 Q486.3 257.15 496.1 266.95 506.25 277 520.5 277 534.8 277 544.9 266.95 555 256.85 555 242.5 L555 241.65 555 119.65 Q555.3 105.95 565.1 96.1 575.25 86 589.5 86 603.8 86 613.9 96.1 623.7 105.95 624 119.65 L624 243.4 Q624.3 257.15 634.1 266.95 644.25 277 658.5 277 672.8 277 682.9 266.95 693 256.85 693 242.5 L693 241.65 693 119.65 Q693.3 105.95 703.1 96.1 713.25 86 727.5 86 741.8 86 751.9 96.1 761.7 105.95 762 119.65 L762 243.4 Q762.3 257.15 772.1 266.95 782.25 277 796.5 277 810.8 277 820.9 266.95 831 256.85 831 242.5 L831 241.65 831 119.65 Q831.3 105.95 841.1 96.1 851.25 86 865.5 86 879.8 86 889.9 96.1 899.7 105.95 900 119.65 L900 243.4 Q900.3 257.15 910.1 266.95 920.25 277 934.5 277 948.8 277 958.9 266.95 969 256.85 969 242.5 L969 241.65 969 119.65 Q969.3 105.95 979.1 96.1 989.25 86 1003.5 86 1017.8 86 1027.9 96.1 1037.7 105.95 1038 119.65 L1038 243.4 Q1038.3 257.15 1048.1 266.95 1058.25 277 1072.5 277 1086.8 277 1096.9 266.95 1107 256.85 1107 242.5 L1107 241.65 1107 119.65 Q1107.3 105.95 1117.1 96.1 1127.25 86 1141.5 86 1155.8 86 1165.9 96.1 1175.7 105.95 1176 119.65 L1176 243.4 Q1176.3 257.15 1186.1 266.95 1196.25 277 1210.5 277 1224.8 277 1234.9 266.95 1245 256.85 1245 242.5 L1245 241.65 1245 72"/>
<path class="shadow" fill="none" stroke="#F65764" stroke-width="42" stroke-linecap="square" stroke-linejoin="round" d="M197 387 L197 542.5 Q197 556.85 207.1 566.95 217.25 577 231.5 577 245.8 577 255.9 566.95 266 556.85 266 542.5 L266 419.65 Q266.3 405.95 276.1 396.1 286.25 386 300.5 386 314.8 386 324.9 396.1 334.7 405.95 335 419.65 L335 543.4 Q335.3 557.15 345.1 566.95 355.25 577 369.5 577 383.8 577 393.9 566.95 404 556.85 404 542.5 L404 541.65 404 419.65 Q404.3 405.95 414.1 396.1 424.25 386 438.5 386 452.8 386 462.9 396.1 472.7 405.95 473 419.65 L473 543.4 Q473.3 557.15 483.1 566.95 493.25 577 507.5 577 521.8 577 531.9 566.95 542 556.85 542 542.5 L542 541.65 542 419.65 Q542.3 405.95 552.1 396.1 562.25 386 576.5 386 590.8 386 600.9 396.1 610.7 405.95 611 419.65 L611 543.4 Q611.3 557.15 621.1 566.95 631.25 577 645.5 577 659.8 577 669.9 566.95 680 556.85 680 542.5 L680 541.65 680 419.65 Q680.3 405.95 690.1 396.1 700.25 386 714.5 386 728.8 386 738.9 396.1 748.7 405.95 749 419.65 L749 543.4 Q749.3 557.15 759.1 566.95 769.25 577 783.5 577 797.8 577 807.9 566.95 818 556.85 818 542.5 L818 541.65 818 419.65 Q818.3 405.95 828.1 396.1 838.25 386 852.5 386 866.8 386 876.9 396.1 886.7 405.95 887 419.65 L887 543.4 Q887.3 557.15 897.1 566.95 907.25 577 921.5 577 935.8 577 945.9 566.95 956 556.85 956 542.5 L956 541.65 956 419.65 Q956.3 405.95 966.1 396.1 976.25 386 990.5 386 1004.8 386 1014.9 396.1 1024.7 405.95 1025 419.65 L1025 543.4 Q1025.3 557.15 1035.1 566.95 1045.25 577 1059.5 577 1073.8 577 1083.9 566.95 1094 556.85 1094 542.5 L1094 541.65 1094 419.65 Q1094.3 405.95 1104.1 396.1 1114.25 386 1128.5 386 1142.8 386 1152.9 396.1 1162.7 405.95 1163 419.65 L1163 543.4 Q1163.3 557.15 1173.1 566.95 1183.25 577 1197.5 577 1211.8 577 1221.9 566.95 1232 556.85 1232 542.5 L1232 541.65 1232 387"/>
<path class="outer" fill="none" stroke="#F79B1B" stroke-width="42" stroke-linecap="square" stroke-linejoin="round" d="M210 387 L210 542.5 Q210 556.85 220.1 566.95 230.25 577 244.5 577 258.8 577 268.9 566.95 279 556.85 279 542.5 L279 419.65 Q279.3 405.95 289.1 396.1 299.25 386 313.5 386 327.8 386 337.9 396.1 347.7 405.95 348 419.65 L348 543.4 Q348.3 557.15 358.1 566.95 368.25 577 382.5 577 396.8 577 406.9 566.95 417 556.85 417 542.5 L417 541.65 417 419.65 Q417.3 405.95 427.1 396.1 437.25 386 451.5 386 465.8 386 475.9 396.1 485.7 405.95 486 419.65 L486 543.4 Q486.3 557.15 496.1 566.95 506.25 577 520.5 577 534.8 577 544.9 566.95 555 556.85 555 542.5 L555 541.65 555 419.65 Q555.3 405.95 565.1 396.1 575.25 386 589.5 386 603.8 386 613.9 396.1 623.7 405.95 624 419.65 L624 543.4 Q624.3 557.15 634.1 566.95 644.25 577 658.5 577 672.8 577 682.9 566.95 693 556.85 69.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0