源代碼
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>聖誕主題</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css" /> <style> body{display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background-color:#000;}.container{position:relative;width:100%;max-width:1000px;aspect-ratio:1 / 1;cursor:none;}.base-image{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;object-fit:cover;}.final-image{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;clip-path:circle(0px at var(--x,0px) var(--y,0px));will-change:clip-path;}.container:hover .final-image{clip-path:circle(10% at var(--x,0px) var(--y,0px));}#particles-js{position:fixed;top:0;left:0;z-index:3;width:100vw;height:100vh;overflow:hidden;}@media (max-width:768px){.container{max-width:90%;}.container:hover .final-image{clip-path:circle(15% at var(--x,0px) var(--y,0px));}}@media (max-width:480px){.container{max-width:100%;}.container:hover .final-image{clip-path:circle(20% at var(--x,0px) var(--y,0px));}}</style> </head> <body> <div class="container"><div id="particles-js"></div><svg width="100%"height="100%"viewBox="0 0 900 900"version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"xml:space="preserve"xmlns:serif="http://www.serif.com/"style=" fill-rule: evenodd; clip-rule: evenodd; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 1.5; fill: rgb(0, 0, 0); stroke: none; stroke-width: 1px; opacity: 1; filter: none; "id="svg4571"preserveAspectRatio="xMidYMid"class="base-image"><defs id="defs2515"></defs><g id="LINES"style=" fill: rgb(0, 0, 0); stroke: none; stroke-width: 1px; stroke-linejoin: round; stroke-linecap: round; stroke-miterlimit: 1.5; opacity: 1; filter: none; "><g id="Sly-right"transform="matrix(0.76769,0,0,0.76769,104.039,2.48585)"><path d="M 450 0 C 698.362 0 900 201.638 900 450 C 900 510.617 887.989 568.451 866.218 621.249"style=" fill: none; stroke: rgb(66, 138, 171); stroke-width: 3.91px; stroke-linejoin: round; stroke-linecap: round; stroke-miterlimit: 1.5; opacity: 1; filter: none; stroke-dasharray: 883px; stroke-dashoffset: 883px; "id="path6355"><animate attributeType="auto"attributeName="stroke-dashoffset"values="-883;-883;0;0"calcMode="spline"keyTimes="0; 0.008862530818951156; 0.026717531818484706; 1"keySplines=".5 .5 .5 1;.5 .5 .5 1;.5 .5 .5 1"dur="300.14s"begin="0s"repeatCount="1"additive="replace"accumulate="none"id="animate9687"style=" stroke: rgb(66, 138, 171); stroke-width: 3.91px; stroke-linejoin: round; stroke-linecap: round; stroke-miterlimit: 1.5; opacity: 1; filter: none; fill: none; "></animate></path></g><g id="Sly-left"transform="matrix(0.76769,0,0,0.76769,104.039,2.48585)"><path d="M 39.493 634.489 C 14.121 578.179 0 515.726 0 450 C 0 201.638 201.638 0 450 0"style=" fill: none; stroke: rgb(66, 138, 171); stroke-width: 3.91px; stroke-linejoin: round; stroke-linecap: round; stroke-miterlimit: 1.5; opacity: 1; filter: none; stroke-dasharray: 897px; stroke-dashoffset: 897px; "id="path9279"><animate attributeType="auto"attributeName="stroke-dashoffset"values="897;897;0;0"calcMode="spline"keyTimes="0; 0.011994402612114347; 0.026717531818484706; 1"keySplines=".5 .5 .5 1;.5 .5 .5 1;.5 .5 .5 1"dur="300.14s"begin="0s"repeatCount="1"additive="replace"accumulate="none"id="animate5718"style=" stroke: rgb(66, 138, 171); stroke-width: 3.91px; stroke-linejoin: round; stroke-linecap: round; stroke-miterlimit: 1.5; opacity: 1; filter: none; fill: none; "></animate></path></g><g id="Trees-left"transform="matrix(0.766838,0,0,0.766838,104.806,-0.233162)"><path d="M 450.152 1173.95 C 450.152 1173.95 450.152 1193.52 450.152 1173.95 C 450.152 901.558 304.081 941.914 134.817 776.297 C 94.705 737.119 61.869 690.525 38.537 638.74 C 51.675 605.276 60.938 571.642 60.834 535.033 C 69.933 558.016 77.378 581.745 87.599 604.27 C 95.844 622.441 105.748 639.283 112.427 658.17 C 106.789 655.307 101.031 652.713 95.139 650.53 C 100.784 663.367 106.529 676.172 112.253 688.979 C 117.424 673.177 122.934 657.733 128.842 642.366 C 124.204 644.448 119.573 646.544 114.939 648.645 C 124.468 616.894 143.448 587.779 153.607 555.799 C 156.134 572.122 156.464 588.922 160.735 604.938 C 165.1 621.309 173.549 634.714 181.936 649.175 C 177.151 648.754 172.111 648.279 167.083 647.505 C 169.977 652.115 173.196 656.867 176.73 661.984 C 177.629 663.285 178.515 664.592 179.389 665.903 C 188.732 641.076 198.76 616.814 211.547 593.133 C 202.098 596.985 192.67 600.881 183.39 605.071 C 193.4 583.939 205.478 563.494 214.83 542.133 C 217.287 536.522 219.345 530.878 221.124 525.199 C 214.184 528.299 207.089 531.139 200.185 534.069 C 213.481 500.074 217.416 464.381 228.772 429.924 C 236.065 465.693 258.504 490.381 278.088 520.886 C 273.617 520.348 269.178 519.757 264.756 519.109 C 267.824 523.274 270.788 527.5 273.556 531.844"style=" fill: none; stroke: rgb(59, 83, 139); stroke-width: 3.91px; stroke-linecap: round; stroke-miterlimit: 2; stroke-linejoin: round; opacity: 1; filter: none; stroke-dasharray: 1800px; stroke-dashoffset: 1800px; "id="path4604"><animate attributeType="auto"attributeName="stroke-dashoffset"values="1800;0;0"calcMode="spline"keyTimes="0; 0.026717531818484706; 1"keySplines=".5 0 .5 1;.5 0 .5 1"dur="300.14s"begin="0s"repeatCount="1"additive="replace"accumulate="none"id="animate4776"style=" stroke: rgb(59, 83, 139); stroke-width: 3.91px; stroke-linejoin: round; stroke-linecap: butt; stroke-miterlimit: 2; opacity: 1; filter: none; fill: none; "></animate></path></g><g id="Trees-right"transform="matrix(-0.766838,0,0,0.766838,795.194,-0.233162)"style=" fill: rgb(0, 0, 0); stroke: none; stroke-width: 1px; stroke-linejoin: round; stroke-linecap: round; stroke-miterlimit: 1.5; opacity: 1; filter: none; "><path d="M 450.152 1173.95 C 450.152 1173.95 450.152 1193.52 450.152 1173.95 C 450.152 937.144 304.081 941.914 134.817 776.297 C 94.856 737.196 55.367 678.818 34.124 625.205 C 36.783 609.762 38.164 595.869 37.602 582.963 C 52.265 623.663 73.954 649.084 95.322 679.903 C 101.401 662.689 108.346 645.7 115.689 628.838 C 110.188 631.319 104.682 633.792 99.182 636.276 C 111.589 609.875 123.468 583.139 134.515 556.132 C 129.788 558.39 125.073 560.673 120.378 563.01 C 132.206 532.071 146.431 498.469 149.795 449.566 C 159.173 487.851 172.758 515.123 186.117 538.123"style=" fill: none; stroke: rgb(38, 66, 124); stroke-width: 3.91px; stroke-linecap: round; stroke-miterlimit: 2; stroke-linejoin: round; opacity: 1; filter: none; stroke-dasharray: 1300px; stroke-dashoffset: 1300px; "id="path1294"><animate attributeType="auto"attributeName="stroke-dashoffset"values="1300;0;0"calcMode="spline"keyTimes="0; 0.01665889251682548; 1"keySplines=".5 0 .5 1;.5 0 .5 1"dur="300.14s"begin="0s"repeatCount="1"additive="replace"accumulate="none"id="animate3553"style=" stroke: rgb(38, 66, 124); stroke-width: 3.91px; stroke-linejoin: round; stroke-linecap: butt; stroke-miterlimit: 2; opacity: 1; filter: none; fill: none; "></animate></path></g><g id="Tree"transform="matrix(0.766838,0,0,0.766838,104.806,-0.233162)"><path d=" M 450.152 1173.95 C 445.479 864.731 425.111 757.707 357.935 757.707 C 344.26 757.707 340.409 742.528 343.585 722.215 C 337.532 733.713 328.873 741.373 316.869 738.418 C 307.73 736.175 307.237 726.168 310.478 714.359 C 302.454 720.413 293.303 723.861 284.138 719.881 C 275.907 716.316 275.103 705.739 277.955 693.541 C 270.255 698.584 262.736 701.151 257.642 698.61 C 248.088 693.865 251.614 682.562 256.203 674.123 C 255.891 674.123 255.567 674.136 255.269 674.123 C 228.501 672.865 233.259 640.249 233.259 640.249 C 233.259 640.249 256.656 638.914 282.945 629.309 C 284.889 628.596 286.873 627.818 288.856 627.015 C 304.347 620.675 320.295 611.346 332.624 597.652 C 329.899 599.623 326.817 601.268 323.336 602.517 C 298.966 611.241 293.081 588.737 298.59 575.464 C 287.896 577.278 265.898 578.134 258.211 556.914 C 258.211 556.914 258.88398426366047 555.8801944057213 260.4269842636605 555.1951944057213 C 260.3669703118478 554.9551806695711 260.484 555.394 260.429 555.148 C 260.428 555.149 338.085 517.626 358.781 465.5 C 357.515 464.418 356.468 463.099 355.627 461.613 C 353.579 458.022 352.75 453.446 352.931 448.883 C 350.597 449.155 347.577 449.22 344.388 448.572 C 339.514 447.574 334.225 444.877 330.375 438.59 C 328.392 435.349 326.797 431.149 325.825 425.744 C 325.825 425.744 325.877 425.704 325.993 425.652 C 328.65 424.123 361.912 404.614 379.814 377.768 C 384.136 371.29 387.557 364.389 389.438 357.208 C 359.2 363.11 357.05 335.786 356.897 331.881 C 356.897 331.88 356.896 331.88 356.896 331.879 C 356.884 331.591 356.884 331.424 356.884 331.414 C 356.883 331.413 356.883 331.412 356.883 331.412 C 373.567 327.201 394.293 298.623 404.161 264.769 C 405.357 260.667 407.232 255.63 407.21 255.659 C 398.523 267.334 381.016 263.946 380.372 244.998 C 380.372 244.997 420.195 231.232 430.823 180.032 C 431.463 176.95 432.21 169.401 432.806 166.029 C 433.338 163.054 434.44 164.181 435.58 160.809 C 437.161 156.171 438.808 151.244 439.119 146.346 L 448.953 130.381 L 458.407 143.519 C 458.523 146.617 461.505 149.489 462.426 152.586 C 463.67 156.69 467.633 158.86 468.229 162.964 C 468.281 163.3 468.921 180.483 471.215 187.586 C 480.254 215.577 501.612 234.318 519.372 246.509 C 519.157 263.96 494.732 259.756 494.732 259.756 C 495.05 262.528 495.096 264.731 494.553 267.395 C 502.241 289.728 521.331 311.118 546.8 331.414 C 546.754 331.631 546.706 331.847 546.655 332.062 C 546.558 332.475 546.452 332.885 546.336 333.291 C 546.257 333.57 546.174 333.847 546.087 334.123 C 546.055 334.223 546.023 334.323 545.99 334.423 C 545.862 334.821 545.724 335.216 545.582 335.609 C 545.565 335.658 545.548 335.706 545.53 335.755 C 545.53 335.756 545.53 335.756 545.53 335.757 C 544.746 337.854 543.728 339.876 542.487 341.748 C 542.355 341.948 542.22 342.148 542.083 342.345 C 542.082 342.346 542.08 342.346 542.079 342.347 C 536.18 350.913 525.851 356.42 513.681 353.788 C 514.041 359.296 512.896 363.87 509.625 366.788 C 512.569 371.734 516.141 377.131 520.382 382.682 C 530.96 396.487 545.698 411.252 565.207 422.361 C 567.268 423.528 569.394 424.669 571.572 425.745 C 571.572 425.745 568.397 451.113 541.447 447.95 L 541.045 447.95 C 543.081 457.167 541.927 465.1 534.953 469.637 C 532.81 471.03 530.646 471.919 528.481 472.368 C 553.378 509.348 593.236 539.622 615.568 546.538 C 616.039 546.684 616.503 546.82 616.958 546.945"style=" fill: none; stroke: rgb(11, 79, 72); stroke-width: 3.91px; stroke-linecap: round; stroke-miterlimit: 2; stroke-linejoin: round; opacity: 1; filter: none; stroke-dasharray: 2152px; stroke-dashoffset: 2152px; "id="path2068"><animate attributeType="auto"attributeName="stroke-dashoffset"values="2152;0;0"calcMode="spline"keyTimes="0; 0.02672086359698807; 1"keySplines=".5 0 .5 1;.5 0 .5 1"dur="300.14s"begin="0s"repeatCount="1"additive="replace"accumulate="none"id="animate8481"style=" stroke: rgb(11, 79, 72); stroke-width: 3.91px; stroke-linejoin: round; stroke-linecap: butt; stroke-miterlimit: 2; opacity: 1; filter: none; fill: none; "></animate></path></g><path id="Star"d=" M 450 900 L 450 121.625 L 423.776 135.25 L 423.678 135.383 L 423.694 135.294 L 423.678 135.302 L 423.697 135.277 L 428.706 106.244 L 407.506 85.7 L 407.411 85.607 L 436.76 81.368 L 450.316 54.78 L 463.613 81.292 L 492.566 85.607 L 471.299 106.216 L 476.333 135.39 L 459.132 126.406"style=" stroke: rgb(255, 240, 0); stroke-width: 3px; fill: rgb(0, 0, 0); stroke-linejoin: round; stroke-linecap: round; stroke-miterlimit: 1.5; opacity: 1; filter: none; stroke-dasharray: 1065px; stroke-dashoffset: 1065px; "><animate attributeType="auto"attributeName="stroke-dashoffset"values="1065;0;0"calcMode="spline"keyTimes="0;0.016725528086892785;1"keySplines=".5 0 .5 1;.5 0 .5 1"dur="300.14s"begin="0s"repeatCount="1"additive="replace"accumulate="none"id="animate9258"style=" stroke: rgb(255, 240, 0); stroke-width: 3px; stroke-linejoin: round; stroke-linecap: round; stroke-miterlimit: 1.5; opacity: 1; filter: none; fill: rgb(0, 0, 0); "></animate></path><g id="Deer"transform="matrix(0.766838,0,0,0.766838,104.806,-0.233162)"style=" fill: rgb(0, 0, 0); stroke: none; stroke-width: 1px; stroke-linejoin: round; stroke-linecap: round; stroke-miterlimit: 1.5; opacity: 1; filter: none; "><path d=" M 450.152 1173.95 C 450.152 1173.95 467.093 864.678 469.803 790.232 C 470.567 769.232 466.413 727.282 466.413 727.282 C 466.433 727.272 466.443 727.262 466.463 727.242 C 467.383 726.392 482.324 712.59 491.203 699.992 C 495.896 693.334 499.265 671.262 501.077 655.259 C 499.528 651.594 498.281 648.123 497.283 644.833 C 497.283 644.813 497.283 644.792 497.273 644.772 C 488.278 615.05 498.556 602.638 502.224 598.19 C 501.899 598.131 501.319 598.018 500.543 597.843 C 493.812 596.345 472.265 590.173 473.652 572.977 C 473.691 572.494 473.748 572.003 473.823 571.502 C 474.164 569.242 474.883 566.802 476.073 564.172 L 485.851 570.596 C 494.796 576.355 507.051 583.902 509.834 583.902 C 512.342 583.902 545.348 582.982 575.084 582.982 C 598.721 582.982 620.292 583.902 622.834 583.902 C 627.298 583.902 632.687 582.632 637.514 578.78 C 640.885 575.773 644.402 571.479 646.664 565.552 C 648.154 561.652 649.114 557.032 649.114 551.622 C 649.114 543.338 646.564 537.506 642.572 533.252 C 637.334 529.956 632.481 525.998 626.314 524.002 C 620.364 522.073 614.123 520.833 608.763 519.353 C 593.921 515.224 575.671 509.59 573.524 497.551 C 572.829 497.745 573.151 497.344 573.343 494.243 C 574.115 494.228 575.799 494.195 577.973 494.153 C 583.134 494.053 589.546 493.929 595.483 493.81 C 601.338 493.691 606.297 493.584 607.208 493.545 C 609.645 493.44 611.796 492.818 613.277 491.993 C 614.032 491.528 614.995 490.988 616.178 490.424 C 620.661 488.111 625.007 486.567 633.708 485.732 C 639.038 485.216 643.562 486.18 647.38 487.549 L 647.38 486.963 L 649.286 485.792 C 650.763 484.884 652.2 483.943 653.593 482.97 C 621.113 479.884 602.994 463.062 593.311 448.728 L 593.307 448.721 C 584.044 434.996 581.624 422.435 581.525 421.907 C 581.12 419.735 582.552 417.646 584.724 417.241 C 586.893 416.836 588.98 418.265 589.388 420.433 C 589.412 420.559 591.469 431.011 598.894 442.656 C 602.116 442.737 604.824 441.843 607.134 439.944 C 614.229 434.112 615.224 421.031 615.234 420.9 C 615.389 418.699 617.301 417.037 619.498 417.186 C 621.699 417.337 623.363 419.238 623.216 421.44 C 623.171 422.114 622.001 438.052 612.242 446.102 C 609.873 448.055 607.23 449.384 604.336 450.082 C 609.675 456.444 616.977 462.823 626.859 467.596 C 651.276 461.648 649.915 421.75 649.897 421.341 C 649.806 419.135 651.519 417.271 653.725 417.177 C 655.924 417.083 657.795 418.794 657.89 421 C 657.911 421.485 658.364 433.026 655.038 445.441 C 651.709 457.869 645.753 466.782 637.562 471.754 C 644.846 473.958 653.216 475.324 662.822 475.458 C 687.831 451.736 684.333 421.984 684.294 421.682 C 684.012 419.491 685.56 417.486 687.751 417.204 C 689.95 416.922 691.947 418.47 692.229 420.661 C 692.412 422.082 696.369 455.772 667.074 482.426 C 663.573 485.627 659.665 488.63 655.436 491.37 C 657.178 492.439 658.391 493.381 658.991 493.874 C 659.276 494.109 659.423 494.243 659.423 494.243 L 659.538 494.185 C 659.537 494.186 659.535 494.186 659.534 494.186 L 695.283 476.313 C 695.283 476.313 695.433 476.723 695.623 477.443 C 696.963 482.492 700.173 502.763 665.253 502.763 C 665.253 502.763 723.534 536.833 718.743 598.102 C 718.733 598.172 718.733 598.232 718.723 598.302 C 718.463 601.632 718.034 604.832 717.434 607.902 L 717.434 607.922 C 711.548 638.275 690.675 655.548 673.433 664.851 L 661.607 729.905 L 662.927 795.818 L 655.504 795.818 L 649.517 732.03 L 643.899 688.958 L 643.433 688.763 L 636.293 705.823 L 625.323 732.033 L 623.333 796.733 L 615.973 795.823 L 612.863 730.193 L 614.413 715.883 L 615.913 701.923 L 618.593 677.023 C 618.593 677.023 603.933 678.063 582.533 674.303 C 555.413 669.543 545.783 663.493 545.783 663.493 C 545.783 663.493 545.143 687.743 539.783 706.483 C 537.883 713.133 535.973 718.273 534.283 722.143 C 531.213 729.193 528.913 732.033 528.913 732.033 L 540.633 795.733 L 532.833 795.733 L 515.143 733.853 C 515.143 733.853 518.483 723.033 518.533 708.643 C 518.543 704.993 518.353 701.112 517.823 697.132 L 517.483 697.172 C 515.473 701.942 511.523 708.322 503.823 715.682 C 487.003 731.742 479.393 733.852 479.393 733.852"style=" fill: none; stroke: rgb(168, 72, 72); stroke-width: 3.91px; stroke-linecap: round; stroke-miterlimit: 2; stroke-linejoin: round; opacity: 1; filter: none; stroke-dasharray: 2734px; stroke-dashoffset: 2734px; "id="path7880"><animate attributeType="auto"attributeName="stroke-dashoffset"values="2734;0;0"calcMode="spline"keyTimes="0; 0.02672086359698807; 1"keySplines=".5 0 .5 1;.5 0 .5 1"dur="300.14s"begin="0s"repeatCount="1"additive="replace"accumulate="none"id="animate6084"style=" stroke: rgb(168, 72, 72); stroke-width: 3.91px; stroke-linejoin: round; stroke-linecap: butt; stroke-miterlimit: 2; opacity: 1; filter: none; fill: none; "></animate></path></g></g></svg><img src="https://fecoder-pic-1302080640.cos.ap-nanjing.myqcloud.com/let-it-draw-final.png"class="final-image"/></div> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script>const container=document.querySelector('.container');const finalImage=document.querySelector('.final-image');container.addEventListener('mousemove',(event)=>{window.requestAnimationFrame(()=>{const rect=container.getBoundingClientRect();const x=event.clientX-rect.left;const y=event.clientY-rect.top;finalImage.style.setProperty('--x',`${x}px`);finalImage.style.setProperty('--y',`${y}px`)})});particlesJS('particles-js',{particles:{number:{value:52,density:{enable:true,value_area:600,},},color:{value:'#fff',},shape:{type:'circle',stroke:{width:0,color:'#000000',},},opacity:{value:0.6,random:true,anim:{enable:false,},},size:{value:5,random:true,anim:{enable:false,},},line_linked:{enable:false,},move:{enable:true,speed:2,direction:'bottom',random:false,straight:false,out_mode:'out',bounce:false,attract:{enable:false,},},},interactivity:{detect_on:'canvas',events:{onhover:{enable:false,},onclick:{enable:true,},resize:true,},},retina_detect:true,});</script> </body></html>
掃描查看手機版網站
21020202000396
