Anime.JS鱼动画

下载代码

html

css

js

分享到微信朋友圈

X

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>

<svg width="100%" height="100%" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="day50-pirahna 1" clip-path="url(#clip0)">
<path id="XMLID 108" d="M1000 1H0V1001H1000V1Z" fill="#cbe4df"/>
<path id="XMLID 46" d="M675.2 83.9C619.5 0.0999794 409.7 19.7 391.7 74.5C383.8 98.7 418.6 113.9 409.4 142.5C398.6 176.1 345.8 170.1 254.5 238.7C239 250.4 144.5 321.3 145.5 416.6C146.4 505.5 220 592.5 299.8 609.4C381.5 626.7 413.3 559.2 496.2 575.5C599.3 595.9 611.5 709 673.9 709C794.8 709.1 920.6 282 834.8 226.5C800.9 204.6 746.9 249.1 709 217.1C672.4 186.3 706.7 131.2 675.2 83.9Z" fill="#E4EFEF"/>
<path id="XMLID 47" d="M431.4 628.7C417.8 643.6 426.4 668.6 444.1 682.6C458.7 694.2 483.3 701.3 500.7 692.8C522.4 682.3 524.6 651.7 505 633C485 613.8 446.8 611.7 431.4 628.7Z" fill="#E4EFEF"/>
<path id="XMLID 48" d="M293 94.7C275.9 99.4 271.4 147.3 283 156.7C314.5 182.1 336.6 157.4 323 122.7C316.8 106.8 303.7 91.7 293 94.7Z" fill="#E4EFEF"/>
<path id="XMLID 50" d="M734.2 130.8C717.1 132.7 712.6 151.8 724.2 155.6C755.7 165.7 777.8 155.9 764.2 142C758 135.7 744.9 129.7 734.2 130.8Z" fill="#E4EFEF"/>
<path id="XMLID15" d="M367.9 535.1C367.9 535.1 359.8 544.3 402.6 587C402.6 570.5 397.6 551.8 420.4 544.6C393 540.9 367.9 535.1 367.9 535.1Z" stroke="#272130" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID107" d="M367.9 535.1C367.9 535.1 359.8 544.3 402.6 587C402.6 570.5 397.6 551.8 420.4 544.6C393 540.9 367.9 535.1 367.9 535.1Z" fill="#372E42"/>
<g id="Group1">
<path id="XMLID 106" d="M567.4 522.6C567.4 522.6 600 534 615 534C630 534 642 528.3 642 528.3L627 522.6C649 522.6 665.5 506 665.5 506L648 502C669.5 498.3 679 476 679 476C675 476 646.4 471.4 646.4 464.7C620.6 490.5 580.5 517.3 567.4 522.6Z" fill="#372E42"/>
<path id="XMLID 183" opacity="0.83" d="M646.4 464.7C620.6 490.5 580.5 517.3 567.4 522.6C567.4 522.6 590.3 530.6 606.5 533.2C609.4 529.6 612.1 526.4 613.8 524.7C619 519.5 640.7 516.4 640.7 510.2C640.7 504 635.4 500.9 648.1 493.8C660.8 486.7 659.5 480.9 659.5 480.9L660.9 472.9C653.5 470.8 646.4 468 646.4 464.7Z" fill="#2D2638"/>
<path id="XMLID 41" d="M591.9 510.2C591.9 510.2 601.6 521.1 608.6 521.1" stroke="#272130" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 42" d="M632.9 510.2C620.2 510.2 613.8 495.8 613.8 495.8" stroke="#272130" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 43" d="M632.9 485C632.9 485 636.6 485 648.6 485" stroke="#272130" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 19" d="M567.4 522.6C567.4 522.6 600 534 615 534C630 534 642 528.3 642 528.3L627 522.6C649 522.6 665.5 506 665.5 506L648 502C669.5 498.3 679 476 679 476C675 476 646.4 471.4 646.4 464.7C620.6 490.5 580.5 517.3 567.4 522.6Z" stroke="#272130" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path id="XMLID 68" d="M301.1 304.5C319.325 304.5 334.1 288.382 334.1 268.5C334.1 248.618 319.325 232.5 301.1 232.5C282.875 232.5 268.1 248.618 268.1 268.5C268.1 288.382 282.875 304.5 301.1 304.5Z" fill="white"/>
<g id="eyes1">
<path id="XMLID 129" d="M290.4 283.6C296.751 283.6 301.9 278.317 301.9 271.8C301.9 265.283 296.751 260 290.4 260C284.049 260 278.9 265.283 278.9 271.8C278.9 278.317 284.049 283.6 290.4 283.6Z" fill="#1E1826"/>
<path id="XMLID 122" d="M287.6 273C290.417 273 292.7 270.672 292.7 267.8C292.7 264.928 290.417 262.6 287.6 262.6C284.783 262.6 282.5 264.928 282.5 267.8C282.5 270.672 284.783 273 287.6 273Z" fill="white"/>
<path id="XMLID 71" d="M293.3 279.9C294.349 279.9 295.2 279.049 295.2 278C295.2 276.951 294.349 276.1 293.3 276.1C292.251 276.1 291.4 276.951 291.4 278C291.4 279.049 292.251 279.9 293.3 279.9Z" fill="white"/>
</g>
<path id="XMLID 28" d="M301.1 304.5C319.325 304.5 334.1 288.382 334.1 268.5C334.1 248.618 319.325 232.5 301.1 232.5C282.875 232.5 268.1 248.618 268.1 268.5C268.1 288.382 282.875 304.5 301.1 304.5Z" stroke="#204751" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<g id="Group2">
<path id="XMLID 70" d="M471.6 222.7C471.6 222.7 501.6 167.1 578.1 167.1C567.6 177.6 567.6 188.1 567.6 188.1C567.6 188.1 595.7 177.3 620.1 185.1C603.6 201.6 603.6 210.6 603.6 210.6C620.1 194.1 655.4 215.3 661.5 221.5C628.7 233.5 638.2 235.4 638.2 235.4C638.2 235.4 658 235.3 676.9 254.2C657.7 260.1 635.7 268.6 639.1 293.1C618.7 274.2 617 257.3 471.6 222.7Z" fill="#372E42"/>
<path id="XMLID 174" opacity="0.83" d="M648.2 267.6L640.8 254.9C640.8 254.9 622.8 247.9 613.9 239C605 230.1 600.6 228.7 592 220.1C583.4 211.5 574.1 209.7 562.6 209.7C551.1 209.7 540.6 198.6 535 193C532.2 190.2 516.5 190.2 501.5 190.9C480.7 206 471.7 222.7 471.7 222.7C617 257.3 618.7 274.2 639 293C637.4 281.5 641.5 273.5 648.2 267.6Z" fill="#2D2638"/>
<path id="XMLID 37" d="M512.6 226.4C512.6 226.4 531.2 202.1 549.7 193" stroke="#272130" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 38" d="M542.5 232.5C542.5 232.5 558.4 213.9 592 202" stroke="#272130" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 39" d="M574.2 246.7C574.2 246.7 593.8 224 627.6 222.7" stroke="#272130" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 40" d="M600.9 263.1C600.9 263.1 629.1 246.7 648.6 246.7" stroke="#272130" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 21" d="M471.6 222.7C471.6 222.7 501.6 167.1 578.1 167.1C567.6 177.6 567.6 188.1 567.6 188.1C567.6 188.1 595.7 177.3 620.1 185.1C603.6 201.6 603.6 210.6 603.6 210.6C620.1 194.1 655.4 215.3 661.5 221.5C628.7 233.5 638.2 235.4 638.2 235.4C638.2 235.4 658 235.3 676.9 254.2C657.7 260.1 635.7 268.6 639.1 293.1C618.7 274.2 617 257.3 471.6 222.7Z" stroke="#272130" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g id="Group3">
<path id="XMLID 93" d="M659.7 344.7C659.7 344.7 675 358.1 699 349.7C723 341.3 783.7 277.3 828.3 288.7C828.3 288.7 805 309.4 810.3 338C815.6 366.7 796.3 389.3 796.3 389.3C796.3 389.3 812.3 400 796.3 416C780.3 432 754 427.7 757 449C760 470.3 775.7 471.3 779 490C782.3 508.7 775 550.7 795 560C795 560 773.7 599.3 713 485.3C685 432.2 677.7 424 659.7 424C653.7 408 659.7 344.7 659.7 344.7Z" fill="#372E42"/>
<path id="XMLID 172" opacity="0.83" d="M659.7 344.7C659.7 344.7 653.7 408 659.7 424C677.7 424 685 432.2 713 485.3C713.1 485.5 713.2 485.7 713.3 485.9C720.1 468.7 720.6 433.9 720.6 422.3C720.6 406.6 738.8 398.5 742.6 376.3C744.8 363.5 737.2 344 730.3 329.7C717.4 339.1 706.4 347.1 698.9 349.7C675 358.1 659.7 344.7 659.7 344.7Z" fill="#2D2638"/>
<path id="XMLID 110" d="M676.8 378.4C676.8 378.4 701.1 384 734.1 368.1C767.1 352.2 773.1 334.7 788.1 334.7" stroke="#272130" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 1" d="M675.8 398.7C675.8 398.7 702.3 398.7 732.5 398.7C762.7 398.7 781.6 389.5 781.6 389.5" stroke="#272130" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 35" d="M675.8 411.6C675.8 411.6 714.7 411 742.7 433" stroke="#272130" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 36" d="M671.3 419C671.3 419 726.7 434.1 758.2 521.1" stroke="#272130" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 20" d="M659.7 344.7C659.7 344.7 675 358.1 699 349.7C723 341.3 783.7 277.3 828.3 288.7C828.3 288.7 805 309.4 810.3 338C815.6 366.7 796.3 389.3 796.3 389.3C796.3 389.3 812.3 400 796.3 416C780.3 432 754 427.7 757 449C760 470.3 775.7 471.3 779 490C782.3 508.7 775 550.7 795 560C795 560 773.7 599.3 713 485.3C685 432.2 677.7 424 659.7 424C653.7 408 659.7 344.7 659.7 344.7Z" stroke="#272130" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path id="XMLID 62" d="M449.8 220.1C440.5 220.1 431.3 220.5 422.3 221.3L423.5 221.5C422.3 221.5 421.1 221.5 419.9 221.5C410.7 222.4 401.7 223.6 393 225.3V541C411.2 544.4 430.2 546.2 449.8 546.2C575.2 546.2 676.8 473.2 676.8 383.2C676.8 293.2 575.2 220.1 449.8 220.1Z" fill="#4DC1C4"/>
<path id="XMLID 181" d="M524.8 229.2C597 256.5 646.3 310.9 646.3 373.5C646.3 463.5 537.3 540.7 411.9 540.7C403 540.7 408.3 542.8 399.7 542.1L393 540.9C411.2 544.3 430.2 546.1 449.8 546.1C575.2 546.1 676.8 473.1 676.8 383.1C676.8 311.9 613.3 251.4 524.8 229.2Z" fill="#23AFAB"/>
<path id="XMLID 32" d="M449.8 220.1C440.5 220.1 431.3 220.5 422.3 221.3L423.5 221.5C422.3 221.5 421.1 221.5 419.9 221.5C410.7 222.4 401.7 223.6 393 225.3V541C411.2 544.4 430.2 546.2 449.8 546.2C575.2 546.2 676.8 473.2 676.8 383.2C676.8 293.2 575.2 220.1 449.8 220.1Z" stroke="#204751" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 65" d="M420.4 221.5C406.3 222.8 392.8 225 379.7 228C321.9 245.8 274.8 303.3 274.8 365L246.4 362C233.9 360.7 222.9 370.3 222.9 382.9C222.9 383 222.9 383.1 222.9 383.1C222.9 465.9 309 534.4 420.4 544.7C452.4 500.6 471.6 444.3 471.6 383.1C471.6 321.8 452.4 265.6 420.4 221.5Z" fill="#4DC1C4"/>
<path id="XMLID 60" d="M293.3 341.9C293.3 341.9 334.2 359.1 370.2 359.1C406.2 359.1 417.6 356.4 421.9 342.5C421.9 342.5 424 351.8 420.3 359.1C416.6 366.4 402 388.8 326.5 373.4C251.1 362.5 278.9 365.4 278.9 365.4C278.9 365.4 277.2 336 293.3 341.9Z" fill="#23AFAB"/>
<path id="XMLID 34" d="M313.6 373.5C313.6 373.5 347.6 390 382.2 390C402.4 390 418.9 382.8 425.7 378.4C446.2 365 432.3 334.3 425.7 344.7C422 350.5 416.4 366.1 412.7 369.9C409 373.7 356.8 378.4 350.2 378.4C343.6 378.4 313.6 373.5 313.6 373.5Z" fill="#23AFAB"/>
<g id="XMLID 177">
<path id="XMLID 179" d="M294.8 365C294.8 303.4 341.9 245.9 399.7 228C407 226.3 414.4 224.9 421.9 223.7C421.4 222.9 420.8 222.2 420.3 221.4C420.3 221.4 420.3 221.4 420.2 221.4C406.2 222.7 392.6 224.9 379.5 228C322.4 245.6 275.6 302 274.6 362.8L294.8 365Z" fill="#23AFAB"/>
<path id="XMLID 180" d="M242.9 383.1C242.9 383 242.9 382.9 242.9 382.9C242.9 373.7 248.9 366.1 256.9 363.2L246.3 362.1C233.8 360.8 222.8 370.4 222.8 383C222.8 383.1 222.8 383.2 222.8 383.2C222.8 466 308.9 534.5 420.3 544.8C420.8 544 421.4 543.3 421.9 542.5C319.7 526.6 242.9 461.3 242.9 383.1Z" fill="#23AFAB"/>
</g>
<path id="XMLID 33" d="M420.4 221.5C406.3 222.8 392.8 225 379.7 228C321.9 245.8 274.8 303.3 274.8 365L246.4 362C233.9 360.7 222.9 370.3 222.9 382.9C222.9 383 222.9 383.1 222.9 383.1C222.9 465.9 309 534.4 420.4 544.7C452.4 500.6 471.6 444.3 471.6 383.1C471.6 321.8 452.4 265.6 420.4 221.5Z" stroke="#204751" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 24" d="M353.7 376.3C347.4 375.7 341.6 375 336.4 374.3C336.1 372.6 336 370.9 336 369.2C336 356.5 343.3 345.7 353.3 342C350.3 346.7 348.5 352.6 348.5 358.9C348.5 365.4 350.4 371.5 353.7 376.3Z" fill="white" stroke="white" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 23" d="M288.5 368.1C280 367 272.1 365.9 265.1 364.8C264.8 362.5 264.7 360.2 264.7 357.8C265.2 340.5 275.4 326.1 289.2 321.3C284.9 327.6 282.2 335.5 282 344.2C281.8 353.1 284.2 361.4 288.5 368.1Z" fill="white" stroke="white" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 30" d="M436 354.7C436 345.4 410 334.7 410 334.7" stroke="#204751" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 66" d="M350.2 306.7C372.291 306.7 390.2 287.896 390.2 264.7C390.2 241.504 372.291 222.7 350.2 222.7C328.109 222.7 310.2 241.504 310.2 264.7C310.2 287.896 328.109 306.7 350.2 306.7Z" fill="white"/>
<path id="XMLID 29" d="M350.2 306.7C372.291 306.7 390.2 287.896 390.2 264.7C390.2 241.504 372.291 222.7 350.2 222.7C328.109 222.7 310.2 241.504 310.2 264.7C310.2 287.896 328.109 306.7 350.2 306.7Z" stroke="#204751" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<g id="eye2">
<path id="XMLID 27" d="M347 293C355.837 293 363 285.613 363 276.5C363 267.387 355.837 260 347 260C338.163 260 331 267.387 331 276.5C331 285.613 338.163 293 347 293Z" fill="#1E1826"/>
<path id="XMLID 67" d="M343.1 278.3C347.021 278.3 350.2 275.032 350.2 271C350.2 266.968 347.021 263.7 343.1 263.7C339.179 263.7 336 266.968 336 271C336 275.032 339.179 278.3 343.1 278.3Z" fill="white"/>
<path id="XMLID 69" d="M351.1 288C352.536 288 353.7 286.791 353.7 285.3C353.7 283.809 352.536 282.6 351.1 282.6C349.664 282.6 348.5 283.809 348.5 285.3C348.5 286.791 349.664 288 351.1 288Z" fill="white"/>
</g>
<path id="XMLID 26" d="M325.6 321.5C325.9 321.2 326.2 320.9 326.5 320.6C322.3 322.6 318.2 325.3 314.7 328.5C301.4 340.6 297.5 357.5 303.5 371.1L321.1 373.5C310.3 357.3 311.5 336.2 325.6 321.5Z" fill="white" stroke="white" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 25" d="M378.7 355.2C378.8 355.1 378.9 354.9 379.1 354.8C377.3 355.9 375.6 357.2 374.2 358.8C369.1 364.6 369.1 371.9 373.4 377.4L382.2 377.5C375.3 371.1 373.5 362.2 378.7 355.2Z" fill="white" stroke="white" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 92" d="M523 397.3C523 397.3 477.8 437 490.3 476.6C490.3 476.6 497 495.9 519 499.3C540.3 502.5 544.7 492.3 549.7 487.3C529.5 479.2 538.5 453 543 448.4C533.7 448.4 523 440.5 519.2 432C515.5 423.5 517.6 415.4 523 397.3Z" fill="#372E42"/>
<path id="XMLID 160" opacity="0.83" d="M490.3 476.7C490.3 476.7 496.7 495.2 517.7 499.1C507.5 474.8 503.2 444.3 501.4 423C491.9 437.8 484.2 457.2 490.3 476.7Z" fill="#2D2638"/>
<path id="XMLID 17" d="M523 397.3C523 397.3 477.8 437 490.3 476.6C490.3 476.6 497 495.9 519 499.3C540.3 502.5 544.7 492.3 549.7 487.3C529.5 479.2 538.5 453 543 448.4C533.7 448.4 523 440.5 519.2 432C515.5 423.5 517.6 415.4 523 397.3Z" stroke="#272130" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 31" d="M425.7 344.7C425.7 344.7 426.9 382.3 373 378.1C312.1 373.3 255.8 363 255.8 363" stroke="#204751" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 109" opacity="0.78" d="M343.8 495.8C356.834 495.8 367.4 485.234 367.4 472.2C367.4 459.166 356.834 448.6 343.8 448.6C330.766 448.6 320.2 459.166 320.2 472.2C320.2 485.234 330.766 495.8 343.8 495.8Z" fill="#6D87AC"/>
<path id="XMLID 118" opacity="0.78" d="M402.6 291.6C406.687 291.6 410 288.287 410 284.2C410 280.113 406.687 276.8 402.6 276.8C398.513 276.8 395.2 280.113 395.2 284.2C395.2 288.287 398.513 291.6 402.6 291.6Z" fill="#6D87AC"/>
<path id="XMLID 125" opacity="0.78" d="M421.2 267.4C427.33 267.4 432.3 262.43 432.3 256.3C432.3 250.17 427.33 245.2 421.2 245.2C415.07 245.2 410.1 250.17 410.1 256.3C410.1 262.43 415.07 267.4 421.2 267.4Z" fill="#6D87AC"/>
<path id="XMLID 158" opacity="0.78" d="M412.7 401.2C415.793 401.2 418.3 398.693 418.3 395.6C418.3 392.507 415.793 390 412.7 390C409.607 390 407.1 392.507 407.1 395.6C407.1 398.693 409.607 401.2 412.7 401.2Z" fill="#6D87AC"/>
<path id="XMLID 120" opacity="0.39" d="M422 304.5C424.043 304.5 425.7 302.843 425.7 300.8C425.7 298.757 424.043 297.1 422 297.1C419.957 297.1 418.3 298.757 418.3 300.8C418.3 302.843 419.957 304.5 422 304.5Z" fill="#6D87AC"/>
<path id="XMLID112" opacity="0.78" d="M518.9 311.6C531.934 311.6 542.5 301.034 542.5 288C542.5 274.966 531.934 264.4 518.9 264.4C505.866 264.4 495.3 274.966 495.3 288C495.3 301.034 505.866 311.6 518.9 311.6Z" fill="#6D87AC"/>
<path id="XMLID 159" opacity="0.39" d="M591.9 355.8C608.137 355.8 621.3 342.637 621.3 326.4C621.3 310.163 608.137 297 591.9 297C575.663 297 562.5 310.163 562.5 326.4C562.5 342.637 575.663 355.8 591.9 355.8Z" fill="#6D87AC"/>
<path id="XMLID 156" opacity="0.78" d="M645 389.4C651.627 389.4 657 384.027 657 377.4C657 370.773 651.627 365.4 645 365.4C638.373 365.4 633 370.773 633 377.4C633 384.027 638.373 389.4 645 389.4Z" fill="#6D87AC"/>
<path id="XMLID 111" opacity="0.78" d="M395.3 502.6C400.16 502.6 404.1 498.66 404.1 493.8C404.1 488.94 400.16 485 395.3 485C390.44 485 386.5 488.94 386.5 493.8C386.5 498.66 390.44 502.6 395.3 502.6Z" fill="#6D87AC"/>
<path id="XMLID 162" d="M500 454.7C500 454.7 510 448.4 514.3 444" stroke="#272130" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 164" d="M500 467.3C500 467.3 520 463 525 458" stroke="#272130" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 168" d="M504.3 476.7C504.3 476.7 517.6 482 527.6 485" stroke="#272130" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="XMLID 170" d="M382.2 544.7C382.2 544.7 388.1 560 395.2 563.3" stroke="#272130" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="1000" height="1000" fill="white"/>
</clipPath>
</defs>
</svg>

css

JavaScript

var design = anime({
  targets: 'svg #Group3',
   skew: 30, 
  easing: 'linear',
  loop: true,
  direction: 'alternate',
});

var design = anime({
  targets: 'svg #eye2',
  keyframes: [
    {translateY: -30},
    {translateX: 15},
    {translateY: 10},
    {translateX: 0},
    {translateY: 0}
  ],
  duration: 4000,
  easing: 'easeOutElastic(1, .8)',
  loop: true
});

var design = anime({
  targets: 'svg #eyes1',
  keyframes: [
    {translateY: -15},
    {translateX: 15},
    {translateY: 10},
    {translateX: 0},
    {translateY: 0}
  ],
  duration: 4000,
  easing: 'easeOutElastic(1, .8)',
  loop: true
});

var design = anime({
  targets: 'svg #Group2',
  skew: -15, 
  easing: 'linear',
  loop: true,
  direction: 'alternate',
});

var design = anime({
  targets: 'svg #Group1',
  skew: -15, 
  easing: 'linear',
  loop: true,
  direction: 'alternate',
});

var design = anime({
  targets: 'svg #XMLID112',
  scale: 2, 
  easing: 'steps(10)',
  loop: true,
  direction: 'alternate',
});

var design = anime({
  targets: 'svg #XMLID107,#XMLID15',
  skew: -15, 
  easing: 'linear',
  loop: true,
  direction: 'alternate',
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Anime.JS鱼动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号