糖灯心草液体流动动画效果-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&qu.........完整代码请登录后点击上方下载按钮下载查看