three+webgl实现7种shader动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：three+webgl实现7种shader动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

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

  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
body {
  font-family: "Inter", sans-serif;
}
</style>


  
  
</head>

  <body class="bg-zinc-950">
  <div class="max-w-7xl mx-auto pt-10 px-4">
    <div class="hidden md:block relative">
      <svg
        class="w-full"
        viewBox="0 0 1272 270"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      ></svg>
      <div class="absolute inset-1 bg-zinc-800" id="item_0"></div>
      <svg
        class="absolute left-0 top-0 w-full"
        viewBox="0 0 1272 270"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clip-path="url(#clip0_69_186)">
          <path
            d="M1272 270H0V0H1272V270ZM34 32V193H1242V32H34Z"
            fill="#09090B"
          ></path>
          <g filter="url(#filter0_d_69_186)">
            <path
              d="M1225.77 198.511L1209.23 227.011C1208.16 228.861 1206.18 230 1204.04 230H939.418C934.794 230 931.908 224.989 934.229 220.989L950.766 192.489C951.839 190.639 953.816 189.5 955.955 189.5H1220.58C1225.21 189.5 1228.09 194.511 1225.77 198.511Z"
              fill="#27272C"
            ></path>
            <path
              d="M1225.77 198.511L1209.23 227.011C1208.16 228.861 1206.18 230 1204.04 230H939.418C934.794 230 931.908 224.989 934.229 220.989L950.766 192.489C951.839 190.639 953.816 189.5 955.955 189.5H1220.58C1225.21 189.5 1228.09 194.511 1225.77 198.511Z"
              stroke="#32323A"
            ></path>
          </g>
          <g filter="url(#filter1_d_69_186)">
            <path
              d="M337.082 230H230.5H69.4926C67.3338 230 65.3414 228.84 64.2753 226.963L48.0901 198.463C45.8186 194.463 48.7076 189.5 53.3074 189.5H320.545C322.684 189.5 324.661 190.639 325.734 192.489L342.271 220.989C344.592 224.989 341.706 230 337.082 230Z"
              fill="#27272C"
            ></path>
            <path
              d="M337.082 230H230.5H69.4926C67.3338 230 65.3414 228.84 64.2753 226.963L48.0901 198.463C45.8186 194.463 48.7076 189.5 53.3074 189.5H320.545C322.684 189.5 324.661 190.639 325.734 192.489L342.271 220.989C344.592 224.989 341.706 230 337.082 230Z"
              stroke="#32323A"
            ></path>
          </g>
          <g filter="url(#filter2_d_69_186)">
            <path
              d="M1247.5 22C1250.81 22 1253.5 24.6863 1253.5 28V197C1253.5 200.314 1250.81 203 1247.5 203H959.013C956.843 203 954.843 204.171 953.781 206.064L929.719 248.936C928.657 250.829 926.657 252 924.487 252H353.503C351.339 252 349.342 250.834 348.278 248.949L323.222 204.551C322.158 202.666 320.161 201.5 317.997 201.5H23.5C20.1863 201.5 17.5 198.814 17.5 195.5V28C17.5 24.6863 20.1863 22 23.5 22H1247.5ZM54 46C50.6863 46 48 48.6863 48 52V168C48 171.314 50.6863 174 54 174H1218C1221.31 174 1224 171.314 1224 168V52C1224 48.6863 1221.31 46 1218 46H54Z"
              fill="#18181B"
            ></path>
            <path
              d="M323.222 204.551L322.786 204.797L323.222 204.551ZM348.278 248.949L348.714 248.703L348.278 248.949ZM929.719 248.936L929.283 248.692L929.719 248.936ZM953.781 206.064L954.217 206.308L953.781 206.064ZM1253.5 28H1253V197H1253.5H1254V28H1253.5ZM1247.5 203V202.5H959.013V203V203.5H1247.5V203ZM953.781 206.064L953.345 205.819L929.283 248.692L929.719 248.936L930.155 249.181L954.217 206.308L953.781 206.064ZM924.487 252V251.5H353.503V252V252.5H924.487V252ZM348.278 248.949L348.714 248.703L323.657 204.305L323.222 204.551L322.786 204.797L347.843 249.195L348.278 248.949ZM317.997 201.5V201H23.5V201.5V202H317.997V201.5ZM17.5 195.5H18V28H17.5H17V195.5H17.5ZM23.5 22V22.5H1247.5V22V21.5H23.5V22ZM48 52H47.5V168H48H48.5V52H48ZM54 174V174.5H1218V174V173.5H54V174ZM1224 168H1224.5V52H1224H1223.5V168H1224ZM1218 46V45.5H54V46V46.5H1218V46ZM1224 52H1224.5C1224.5 48.4101 1221.59 45.5 1218 45.5V46V46.5C1221.04 46.5 1223.5 48.9624 1223.5 52H1224ZM1218 174V174.5C1221.59 174.5 1224.5 171.59 1224.5 168H1224H1223.5C1223.5 171.038 1221.04 173.5 1218 173.5V174ZM48 168H47.5C47.5 171.59 50.4101 174.5 54 174.5V174V173.5C50.9624 173.5 48.5 171.038 48.5 168H48ZM48 52H48.5C48.5 48.9624 50.9624 46.5 54 46.5V46V45.5C50.4101 45.5 47.5 48.4101 47.5 52H48ZM17.5 28H18C18 24.9624 20.4624 22.5 23.5 22.5V22V21.5C19.9101 21.5 17 24.4101 17 28H17.5ZM23.5 201.5V201C20.4624 201 18 198.538 18 195.5H17.5H17C17 199.09 19.9101 202 23.5 202V201.5ZM323.222 204.551L323.657 204.305C322.505 202.263 320.342 201 317.997 201V201.5V202C319.981 202 321.811 203.069 322.786 204.797L323.222 204.551ZM353.503 252V251.5C351.519 251.5 349.689 250.431 348.714 248.703L348.278 248.949L347.843 249.195C348.995 251.237 351.158 252.5 353.503 252.5V252ZM929.719 248.936L929.283 248.692C928.31 250.426 926.476 251.5 924.487 251.5V252V252.5C926.838 252.5 929.005 251.231 930.155 249.181L929.719 248.936ZM959.013 203V202.5C956.662 202.5 954.495 203.769 953.345 205.819L953.781 206.064L954.217 206.308C955.19 204.574 957.024 203.5 959.013 203.5V203ZM1253.5 197H1253C1253 200.038 1250.54 202.5 1247.5 202.5V203V203.5C1251.09 203.5 1254 200.59 1254 197H1253.5ZM1253.5 28H1254C1254 24.4101 1251.09 21.5 1247.5 21.5V22V22.5C1250.54 22.5 1253 24.9624 1253 28H1253.5Z"
              fill="#232327"
            ></path>
          </g>
          <path
            d="M952.266 226H962.42C962.779 226 963.11 225.808 963.288 225.496L972.145 209.996C972.526 209.329 972.045 208.5 971.277 208.5H961.566C961.215 208.5 960.889 208.684 960.709 208.986L951.409 224.486C951.009 225.152 951.489 226 952.266 226Z"
            fill="#43434E"
          ></path>
          <path
            d="M972.266 226H982.42C982.779 226 983.11 225.808 983.288 225.496L992.145 209.996C992.526 209.329 992.045 208.5 991.277 208.5H981.566C981.215 208.5 980.889 208.684 980.709 208.986L971.409 224.486C971.009 225.152 971.489 226 972.266 226Z"
            fill="#43434E"
          ></path>
          <path
            d="M992.266 226H1002.42C1002.78 226 1003.11 225.808 1003.29 225.496L1012.15 209.996C1012.53 209.329 1012.04 208.5 1011.28 208.5H1001.57C1001.21 208.5 1000.89 208.684 1000.71 208.986L991.409 224.486C991.009 225.152 991.489 226 992.266 226Z"
            fill="#43434E"
          ></path>
          <path
            d="M1012.27 226H1022.42C1022.78 226 1023.11 225.808 1023.29 225.496L1032.15 209.996C1032.53 209.329 1032.04 208.5 1031.28 208.5H1021.57C1021.21 208.5 1020.89 208.684 1020.71 208.986L1011.41 224.486C1011.01 225.152 1011.49 226 1012.27 226Z"
            fill="#43434E"
          ></path>
          <path
            d="M1032.27 226H1042.42C1042.78 226 1043.11 225.808 1043.29 225.496L1052.15 209.996C1052.53 209.329 1052.04 208.5 1051.28 208.5H1041.57C1041.21 208.5 1040.89 208.684 1040.71 208.986L1031.41 224.486C1031.01 225.152 1031.49 226 1032.27 226Z"
            fill="#43434E"
          ></path>
          <path
            d="M1052.27 226H1062.42C1062.78 226 1063.11 225.808 1063.29 225.496L1072.15 209.996C1072.53 209.329 1072.04 208.5 1071.28 208.5H1061.57C1061.21 208.5 1060.89 208.684 1060.71 208.986L1051.41 224.486C1051.01 225.152 1051.49 226 1052.27 226Z"
            fill="#43434E"
          ></path>
          <path
            d="M1072.27 226H1082.42C1082.78 226 1083.11 225.808 1083.29 225.496L1092.15 209.996C1092.53 209.329 1092.04 208.5 1091.28 208.5H1081.57C1081.21 208.5 1080.89 208.684 1080.71 208.986L1071.41 224.486C1071.01 225.152 1071.49 226 1072.27 226Z"
            fill="#43434E"
          ></path>
          <path
            d="M1092.27 226H1102.42C1102.78 226 1103.11 225.808 1103.29 225.496L1112.15 209.996C1112.53 209.329 1112.04 208.5 1111.28 208.5H1101.57C1101.21 208.5 1100.89 208.684 1100.71 208.986L1091.41 224.486C1091.01 225.152 1091.49 226 1092.27 226Z"
            fill="#43434E"
          ></path>
          <path
            d="M1112.27 226H1122.42C1122.78 226 1123.11 225.808 1123.29 225.496L1132.15 209.996C1132.53 209.329 1132.04 208.5 1131.28 208.5H1121.57C1121.21 208.5 1120.89 208.684 1120.71 208.986L1111.41 224.486C1111.01 225.152 1111.49 226 1112.27 226Z"
            fill="#43434E"
          ></path>
          <path
            d="M1132.27 226H1142.42C1142.78 226 1143.11 225.808 1143.29 225.496L1152.15 209.996C1152.53 209.329 1152.04 208.5 1151.28 208.5H1141.57C1141.21 208.5 1140.89 208.684 1140.71 208.986L1131.41 224.486C1131.01 225.152 1131.49 226 1132.27 226Z"
            fill="#43434E"
          ></path>
          <path
            d="M1152.27 226H1162.42C1162.78 226 1163.11 225.808 1163.29 225.496L1172.15 209.996C1172.53 209.329 1172.04 208.5 1171.28 208.5H1161.57C1161.21 208.5 1160.89 208.684 1160.71 208.986L1151.41 224.486C1151.01 225.152 1151.49 226 1152.27 226Z"
            fill="#43434E"
          ></path>
          <path
            d="M1172.27 226H1182.42C1182.78 226 1183.11 225.808 1183.29 225.496L1192.15 209.996C1192.53 209.329 1192.04 208.5 1191.28 208.5H1181.57C1181.21 208.5 1180.89 208.684 1180.71 208.986L1171.41 224.486C1171.01 225.152 1171.49 226 1172.27 226Z"
            fill="#43434E"
          ></path>
          <path
            d="M1192.27 226H1202.42C1202.78 226 1203.11 225.808 1203.29 225.496L1212.15 209.996C1212.53 209.329 1212.04 208.5 1211.28 208.5H1201.57C1201.21 208.5 1200.89 208.684 1200.71 208.986L1191.41 224.486C1191.01 225.152 1191.49 226 1192.27 226Z"
    .........完整代码请登录后点击上方下载按钮下载查看