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 27.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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