糖灯心草液体流动动画效果-html代码-BFW代码库

代码语言：html
所属分类：动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> Sugar rush (candyland)</title>
<style>
  body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    background-color: rgb(255, 204, 250);
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.svg-wrapper {
    width: 500px;
    border-radius: 4px;
    box-shadow: 1px 1px 2px rgba(50, 50, 50, 1.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media (max-height: 800px) {
    .svg-wrapper {
        width: auto;
        height: calc(100vh - 32px);
        margin: 0px;
    }

    .svg-wrapper svg {
        height: 100%;
        width: auto;
    }
}


@media (max-width: 500px) {
    .svg-wrapper {
        width: 100%;
        margin: 16px;
    }
}
</style>

</head>
<body translate="no">
<div class="wrapper">
<div class="svg-wrapper">
<svg class="the-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 803.11 1234.09"><title>candyland</title><g id="bg"><rect x="-108.17" y="-43.69" width="1153.05" height="1308.93" style="fill:#ffccfa" /></g><g id="BlockB2"><polygon points="157.15 1001.38 157.15 756.41 465.14 578.29 465.14 827.86 157.15 1001.38" style="fill:#42210b" /><polygon points="51.08 695.17 157.15 756.41 439.49 593.2 333.92 531.86 51.08 695.17" style="fill:#fff" /><polygon points="157.15 756.41 157.15 1001.38 51.08 940.14 51.08 695.17 157.15 756.41" style="fill:#fff6db" /><path d="M157.15,904.6s-7.47-11.59-18.1-8.3-26.51-4-31.7-7.74c-4.67-3.37-14.26.67-20.88,1.36-7,.73-19.85-6.38-26.14-10.86s-9.25-1.52-9.25-1.52V851.45l106.07,31.7Z" style="fill:#fff" /><path d="M157.15,875.34s-17-15.87-34.56-12.38c-14.46,2.87-33-2-40.11-6.19-5-3-18.93-20.62-31.4-15.58v17.46c19.94-2.06,26.35,25.17,41.71,18.07s12.26,10.74,31.23,6.4,33.13,8,33.13,8V875.34Z" style="fill:#e7223a" /></g>
<g id="SodaFall_B" data-name="SodaFall B">
<polygon points="166.4 763.96 166.4 1266.93 231.08 1304.28 231.08 800.04 166.4 763.96" style="fill:#851d14" />
<polygon points="166.4 764 231.08 800.08 513.74 639.42 447.24 598.36 166.4 764" style="fill:#6f1811" />
</g>
<g id="SodaFall_B_render"></g>
<g id="sf_Abottom" data-name="sf Abottom"><polygon points="398.42 665.38 398.42 699.75 331.92 666.38 331.92 627.6 398.42 665.38" style="fill:#851d14" /></g>
<g id="sf_Abottom_render"></g>
<g id="BlockB"><polygon points="205.98 792.53 478.14 949.68 760.99 786.37 495.54 633.09 205.98 792.53" style="fill:#fff" /><polygon points="205.98 792.53 206.6 1037.86 478.14 1194.65 478.14 949.68 205.98 792.53" style="fill:#fff6db" /><polygon points="478.14 1194.65 760.99 1031.34 760.99 786.37 478.14 949.68 478.14 1194.65" style="fill:#ded6bf" /><path d="M761,941.92s-16.84.6-20.29,5.88-28.38,13-33.25,12.16-24.13,32.65-44.4,35.48-27.38,29.81-51.1,32.45-39.34,20.48-46,22.71-47,6.28-62,19.66-21.26,14.6-25.74,12.58v-28.39L761,913.93Z" style="fill:#ccc" /><path d="M761,901.46v26.15c-3.07,9.24-12.27,10.79-22.7,11-20.87.42-18.48,2.86-26.93,8.55-7.82,5.27-21.29,24.43-38.61,25.68s-16.85.39-29.59,9.15-8.95,18-34.7,25.91c-17.27,5.3-17.27,3-26.64,10.77-12.64,10.43-25.4,31.68-47.41,29.25-16.48-1.82-42.26,9.22-56.27,14.61v-26.15c3.15-2.69,11.83-5.8,49-16.63,30.28-8.83,57.11-19.77,81.78-41.89s53.75-42.75,81.35-41C714.06,938.32,761,901.46,761,901.46Z" style="fill:#cc1e33" /><path d="M247.84,961.9c4.87-.81,24.13,32.65,44.41,35.49s27.37,29.8,51.09,32.44,39.34,20.48,46,22.71,47,6.28,62.05,19.67,11.11,1.68,26.72,10.63V1057L206.3,920.59v25.65C214.55,957.72,247.84,961.9,247.84,961.9Z" style="fill:#fff" /><path d="M206.23,893.55l.1,38.64c3.07,9.24,6.5,7.69,16.93,7.9,20.87.42,24.74,6,30.51,13.52s12.44,18,29.77,19.23,17.94,5,30.68,13.79,7.16,16.19,33.6,21.27c15.69,3,20.36.91,26.65,10.77,8.81,13.81,25.4,31.68,47.4,29.25,16.49-1.82,42.26,9.22,56.27,14.61v-26.15c-3.14-2.69-11.82-5.8-49-16.63-30.28-8.83-49.29-19.18-81.78-41.89-27.24-19-57.86-34.87-81.35-41C243,930.8,206.23,893.55,206.23,893.55Z" style="fill:#e7223a" /></g><g id="bA2"><polygon points="216.9 436.87 322.82 497.56 499.67 395.97 393.61 334.86 216.9 436.87" style="fill:#fff" /><path d="M216.9,436.87l0,85.07a81.52,81.52,0,0,0,13.55,3.86c8.91,2,4.33,5.23,12.91,8.37,7.52,2.75,15.16-3.83,22.43-.47,10.21,4.73,2.89,13.82,11.92,20.52,7.66,5.67,14.88,11.35,23.27,15.86,9.61,5.18,17.67,18.3,21.87,21.68v-94.2Z" style="fill:#fff6db" /><path d="M302.56,551.05c-9.42,2.15-15.23-9.51-17.44-14-1.88-3.87-8.17-6.22-12.21-11.8-5.7-7.87-22.87-3.07-28.47-8.46s-13.83-10.65-20.7-6.88c-2.77,1.52-5.09.23-6.87-1.84v13.92a81.52,81.52,0,0,0,13.55,3.86c8.91,2,4.33,5.23,12.91,8.37,7.52,2.75,15.16-3.83,22.43-.47,10.21,4.73,2.89,13.82,11.92,20.52,7.66,5.67,14.88,11.35,23.27,15.86,9.61,5.18,17.67,18.3,21.87,21.68v-23S312,548.9,302.56,551.05Z" style="fill:#e7223a" /><path d="M373.57,568.54c14.78,1.11,7.63-23.09,22-26.71,8.19-2.05,10.56,9,18.86,7.53,15.81-2.88,11-48.18,27.1-48.32,5-.05,5,7.92,9.9,8.12,9.12.37,10.22-15.11,19.35-15.3,5.87-.12,7.1,4.79,12.87,3.7,11.44-2.16,3.25-25.11,13.56-30.53,1.41-.74,1.09-11.79,2.5-12.53l0-58.53L322.82,497.56v94.2C336.44,598.87,348.86,566.68,373.57,568.54Z" style="fill:#b0aa97" /><path d="M345.41,580.92c-1.57-3-4-5.06-7.61-4.45-11.39,1.9-15-7.7-15-7.7v23C330,595.52,336.89,588.29,345.41,580.92Z" style="fill:#a11829" /></g>
<g id="SodaFall_A" data-name="SodaFall A">
<polygon points="331.92 503.39 398.42 541.54 566.56 445.26 499.52 406.55 331.92 503.39" style="fill:#6f1811" /><polyline points="398.42 665.38 398.42 541.54 331.92 503.39 331.92 627.6" style="fill:#851d14" /></g>
<g id="sodaFall_A_render"></g>
<g id="chocolate"><polygon points="545.61 790.24 634.56 842.13 767.45 690.15 767.45 678.32 631.38 828.89 545.61 778.02 545.61 790.24" style="fill:#754c24" /><polygon points="676.51 629.53 767.45 678.32 631.38 828.89 545.61 778.02 676.51 629.53" style="fill:#8c6239" /><path d="M658.72,652.79s15.82,10.83,18,10.38,15-15.59,14.7-18.27-14.4-10.69-17.37-10.84S658.72,649.82,658.72,652.79Z" style="fill:#9e6832" /><path d="M676.77,663.17c2.23-.45,15-15.59,14.7-18.27-.11-1-2.36-2.92-5.22-4.82h-.14a4.73,4.73,0,0,1,1.58,4.14c-.2,2.85-8.73,13.33-12.25,14.16-2.67.62-15-8.92-15-8.92l-.12-.22a7.81,7.81,0,0,0-1.65,3.55S674.54,663.62,676.77,663.17Z" style="fill:#754c24" /><path d="M681.4,665.65s15.83,10.83,18.05,10.38,15-15.59,14.7-18.26-14.4-10.7-17.37-10.84S681.4,662.68,681.4,665.65Z" style="fill:#9e6832" /><path d="M699.45,676c2.23-.44,15-15.59,14.7-18.26-.11-1-2.36-2.93-5.22-4.82h-.13a4.68,4.68,0,0,1,1.57,4.13c-.2,2.85-8.73,13.33-12.25,14.16-2.66.62-15-8.92-15-8.92l-.12-.22a7.92,7.92,0,0,0-1.65,3.55S697.23,676.48,699.45,676Z" style="fill:#754c24" /><path d="M703.53,679.11s15.83,10.83,18.05,10.38,15-15.59,14.7-18.26-14.4-10.7-17.37-10.84S703.53,676.14,703.53,679.11Z" style="fill:#9e6832" /><path d="M721.58,689.49c2.23-.44,15-15.59,14.7-18.26-.11-1.05-2.36-2.93-5.22-4.82h-.14a4.67,4.67,0,0,1,1.58,4.13c-.2,2.85-8.73,13.33-12.25,14.16-2.66.62-15-8.92-15-8.92l-.12-.22a7.81,7.81,0,0,0-1.65,3.55S719.36,689.94,721.58,689.49Z" style="fill:#754c24" /><path d="M725.27,691.22s15.82,10.83,18.05,10.38,15-15.59,14.7-18.26-14.4-10.7-17.37-10.84S725.27,688.25,725.27,691.22Z" style="fill:#9e6832" /><path d="M743.32,701.6c2.23-.44,15-15.59,14.7-18.26-.11-1.05-2.36-2.93-5.23-4.82h-.13a4.7,4.7,0,0,1,1.58,4.13C754,685.5,745.51,696,742,696.81c-2.67.62-15-8.92-15-8.92l-.13-.22a7.93,7.93,0,0,0-1.64,3.55S741.09,702.05,743.32,701.6Z" style="fill:#754c24" /><path d="M640.46,676.89s15.26,10.45,17.41,10,14.48-15,14.19-17.63-13.9-10.32-16.77-10.46S640.46,674,640.46,676.89Z" style="fill:#9e6832" /><path d="M657.87,686.91c2.15-.43,14.48-15,14.19-17.63-.11-1-2.28-2.82-5-4.65h-.13a4.54,4.54,0,0,1,1.52,4c-.19,2.75-8.43,12.87-11.82,13.66-2.57.61-14.43-8.6-14.43-8.6l-.12-.22a7.66,7.66,0,0,0-1.58,3.43S655.72,687.34,657.87,686.91Z" style="fill:#754c24" /><path d="M662.34,689.3s15.27,10.45,17.42,10,14.48-15.05,14.19-17.63-13.9-10.31-16.77-10.46S662.34,686.43,662.34,689.3Z" style="fill:#9e6832" /><path d="M679.76,699.32c2.15-.43,14.48-15.05,14.19-17.63-.11-1-2.28-2.82-5-4.65h-.13a4.55,4.55,0,0,1,1.52,4c-.19,2.75-8.43,12.87-11.82,13.66-2.57.61-14.43-8.6-14.43-8.6l-.12-.22a7.66,7.66,0,0,0-1.59,3.43S677.61,699.75,679.76,699.32Z" style="fill:#754c24" /><path d="M683.7,702.29s15.27,10.45,17.42,10,14.47-15,14.19-17.63-13.9-10.32-16.77-10.46S683.7,699.42,683.7,702.29Z" style="fill:#9e6832" /><path d="M701.12,712.31c2.15-.43,14.47-15,14.19-17.63-.12-1-2.28-2.82-5-4.65h-.13a4.54,4.54,0,0,1,1.52,4c-.19,2.75-8.42,12.87-11.82,13.66-2.57.61-14.43-8.6-14.43-8.6l-.11-.22a7.66,7.66,0,0,0-1.59,3.43S699,712.74,701.12,712.31Z" style="fill:#754c24" /><path d="M704.68,714S720,724.43,722.1,724s14.47-15,14.18-17.63-13.9-10.32-16.76-10.46S704.68,711.11,704.68,714Z" style="fill:#9e6832" /><path d="M722.1,724c2.15-.43,14.47-15,14.18-17.63-.11-1-2.28-2.82-5-4.65h-.13a4.53,4.53,0,0,1,1.52,4c-.19,2.76-8.42,12.87-11.82,13.67-2.57.6-14.43-8.6-14.43-8.6l-.12-.22a7.77,7.77,0,0,0-1.58,3.43S720,724.43,722.1,724Z" style="fill:#754c24" /><path d="M623.31,698.58s14.9,10.2,17,9.78,14.13-14.69,13.85-17.2S640.58,681.09,637.79,681,623.31,695.78,623.31,698.58Z" style="fill:#9e6832" /><path d="M640.3,708.36c2.........完整代码请登录后点击上方下载按钮下载查看