svg烈日下的冰淇淋动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg烈日下的冰淇淋动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

<link href="https://fonts.googleapis.com/css2?family=Rajdhani&display=swap" rel="stylesheet">
  
  
  
<style>
* {
  margin: 0;
  padding: 0;
}

#wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #fbf0fc;
  overflow: hidden;
}

/* === SVG === */
svg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: radial-gradient(ellipse at 30% 30%, rgba(144, 221, 236, 1) 0%, rgba(89, 177, 213, 1) 50%);
}

svg .ice_parts {
  fill: #f5f2ee;
  stroke: #000;
  stroke-miterlimit: 10;
  stroke-width: 1.2px
}

svg .ice_parts2 {
  fill: none;
  stroke: #000;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-width: 1.2
}

svg #arm_left {
  transform-origin: 100% 100%;
  transform-box: fill-box;
}

svg #arm_right {
  transform-origin: 0% 100%;
  transform-box: fill-box;
}

svg #pupil_left, svg #pupil_right, svg #s5, svg #s2 {
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

/* horizontal flip */
svg #cloud2 {
  transform: scale(-1, 1);
  transform-origin: 50% 50%;
}

.btn_Fullscreen {
    position: absolute;
    left: 5%;
    bottom: 5%;
    border: 1px solid white;
    border-radius: 5px;
    padding: 3px 15px;
    background-color: #1f1f1f;
    color: #fdfcfc;
    -webkit-font-smoothing: antialiased;
    font-size: 18px;
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 1px;
    cursor: pointer;
    user-select: none;
    box-shadow: 5px 3px 12px 0px rgba(0, 0, 0, 0.75);
    transition: color .3s;
}

.btn_Fullscreen:hover {
    color: #c362f4;
}
</style>


</head>

<body >
  <div id="wrapper" ontouchstart="">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 600" preserveAspectRatio="xMaxYMin meet">
        <defs>
            <linearGradient id="gradient_melt2" x1="50%" y1="0%" x2="50%" y2="100%" >
                <stop offset="0%" style="stop-color:rgb(255, 255, 255);stop-opacity:0" />
                <stop offset="20%" style="stop-color:rgb(255, 255, 255);stop-opacity:0.3" />
                <stop offset="40%" style="stop-color:rgb(255, 255, 255);stop-opacity:1" />
            </linearGradient>

            <filter id="filter_sunBlur" x="-20%" y="-20%" width="140%" height="140%">
                <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
            </filter>

            <linearGradient id="gradient_cloud1" x1="658.39" y1="-55.99" x2="646.49" y2="574.71" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#fff4ff"/>
                <stop offset="0.2" stop-color="#fbf3fe"/>
                <stop offset="0.38" stop-color="#f0f0fc"/>
                <stop offset="0.56" stop-color="#ddecf7"/>
                <stop offset="0.73" stop-color="#c3e5f2"/>
                <stop offset="0.91" stop-color="#a1ddea"/>
                <stop offset="1" stop-color="#8bd7e5"/>
            </linearGradient>

            <linearGradient id="gradient_cloud2" x1="623.27" y1="84.56" x2="628.08" y2="789.71" xlink:href="#gradient_cloud1"/>

            <linearGradient id="gradient_cloud3" x1="624.83" y1="567.32" x2="624.83" y2="818.88" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#fff4ff"/>
                <stop offset="1" stop-color="#ded7e5"/>
            </linearGradient>

            <path id="cloud" d="M1429.3,399.4a98.2,98.2,0,0,0-97.1-98.2,42.6,42.6,0,0,0-81.6,17,43.7,43.7,0,0,0,4.5,19.1,97.8,97.8,0,0,0-22.1,62.1,92.3,92.3,0,0,0,.7,11.8,98.2,98.2,0,0,0-82,59.1,41.8,41.8,0,0,0-16.6-3.4,42.6,42.6,0,0,0-42.6,42.6,40.7,40.7,0,0,0,2.3,13.5,76,76,0,0,0-69,57,44,44,0,0,0-8.3-.9A39.5,39.5,0,0,0,987,593.5a113.1,113.1,0,0,0-81.7-34.8h-4.1a42.4,42.4,0,0,0-74.8-5.9,39.3,39.3,0,0,0-45.1,6.4,98.2,98.2,0,0,0-167.4-49.2A75.8,75.8,0,0,0,559,534.7a94,94,0,0,0-16.9-1.5A97.5,97.5,0,0,0,471.8,563a39.5,39.5,0,0,0-68,12.5,116.8,116.8,0,0,0-28.2-12.4c.3-2.2,8.4-50.1-42-49.4a43,43,0,0,0-40.8,30.5,96.3,96.3,0,0,0-10.8-.7,87.8,87.8,0,0,0-40.9,10.1,87.8,87.8,0,0,0-138-68A98.3,98.3,0,0,0,16,411.2a115,115,0,0,0,.7-11.8A98.1,98.1,0,0,0-45,308.2V591.8c.6.4,0,63.2,0,63.2H1314.5a113.3,113.3,0,0,0-21.5-62.1c28.2-17.3,46.8-91.8,46.3-95.7A98.2,98.2,0,0,0,1429.3,399.4Z"/>
        </defs>

        <!-- CLOUDS -->
        <use xlink:href="#cloud" id="cloud1" fill="url(#gradient_cloud1)"   x="-40" y="-100" />
        <use xlink:href="#cloud" id="cloud2" fill="url(#gradient_cloud2)"   x="40" y="-60" />
        <use xlink:href="#cloud" id="cloud3" fill="url(#gradient_cloud3)"  x="0" y="0" />


        <!-- Human HAND img -->
        <image id="img" width="1280" height="600" xlink:href="//repo.bfw.wiki/bfwrepo/image/60779cb58ebcc.png" />


        <!-- ICE CREAM PARTS-->
        <path id="eyebrow_left" class="ice_parts2" d="M908.5,140.5s6-7,13-7" />    
        <path id="eye_left" class="ice_parts" d="M911.8,159.3c-4.2-6.5-1-18,12.3-18.3s14.1,15.3,7.6,16.6S916.8,167.1,911.8,159.3Z"/>
        <circle id="pupil_left" cx="924.9" cy="149.9" r="2.5" />

        <path id="eyebrow_right" class="ice_parts2" d="M994.2,140.1s-6.3-7.6-13.5-6.2"/>
        <path id="eye_right" class="ice_parts" d="M991.1,158.9c4.1-6.4,1-18-12.3-18.3s-14.2,15.4-7.6,16.6S986,166.7,991.1,158.9Z"/>
        <circle id="pupil_right" cx="977.9" cy="149.5" r="2.5" />

        <path id="mouth" fill="#747472" stroke-width="1px" stroke="black"
            d="M951.1,171.5c-14.9,0-37.9,13.3-35,23.9s20.9,1.9,35,1.9,32,8.7,34.9-1.9S966,171.5,951.1,171.5Z"/>
        <path id="tongue" fill="#ffc5d3"
            d="M949.8,185.4c-8.2.1-15.1,7.1-16.3,13.6,5.7-1,11.9-2.4,17.6-2.4s12.5,1.5,18.3,2.5C966.9,189.6,957.3,185.3,949.8,185.4Z"/>

        <path id="arm_left" class="ice_parts"
            d="M891,183.6a4.2,4.2,0,0,0,3.1-2h0a5.2,5.2,0,0,0,.6-2.8,3.4,3.4,0,0,0-4-3.1l-4.3.4c-17.4.9-100.7-33.4-102.2-46.7s-8.2-13.6-5.4-4.1c-10-9.7-18.7-7-4.4,4.2-9.5-2.6-21.6,3.8-2.8,5.6-10.2,2.5-13.6,10-.4,7.3S858,188.5,888.9,184Z"/>
        <path id="arm_right" class="ice_parts"
            d="M1014.8,179.7a4.1,4.1,0,0,1-3.1-2.1h0a4.5,4.5,0,0,1-.6-2.8,3.5,3.5,0,0,1,3.9-3.2l4.3.4c17.4.7,100.5-34.2,101.8-47.5s8.2-13.7,5.4-4.2c9.9-9.7,18.6-7.2,4.4,4.2,9.5-2.7,21.7,3.6,2.9,5.5,10.2,2.5,13.7,10,.4,7.3s-86.4,47-117.3,42.7Z"/>

        <path id="drop1" class="ice_parts" d="M914.1,243.3a6.6,6.6,0,0,1-4.2-1.3c-3.3-3,.5-15.8,2.7-22,5.5,10.4,7.8,18.1,6.3,21.2-.6,1.3-2.5,2.1-4.8,2.1Z"/>
        <path id="melt1" class="ice_parts" d="M902.9,216.1c4.5,7.3,1.6,25.9,12,25.9s4.2-19.4,8.1-22.6" />

        <path id="melt2" stroke="#000" stroke-width="1.2px" fill="url(#gradient_melt2)" d="M969.2,211.8c12.9,0,1.1,22.8,18.9,22.8,14.1,0,6-26.8,20.5-30.4"/>

        <path id="melt3_inside" fill="#f5f2ee"
            d="M1022.2,199.9c.2.4-2.3-.5-2.2,0s-.1,2.4,0,3,.6,2.3.9,3.4a2.9,2.9,0,0,0,1.8,2,1.3,1.3,0,0,0,1.8,0c3.9,1.6,2.9,2.2,2.7,5.5a20.3,20.3,0,0,1-3.6,9.7c-1.8,1.9-.9,1.9-.9,3.7s-.7,3.5-.9,4.5c-2.2,5.4-3,11.4-4.5,17.1-.9,3.5-.9,7-1.9,10.3-2.2,7.3-2.9,13.4-4.5,24.8a3.1,3.1,0,0,1-.2.7.6.6,0,0,0-.1.4h0c19.2,5.5,19.3-16.8,13.1-24.4s8.8-28.2,10.2-40.6C1034.6,213.9,1032.7,204.4,1022.2,199.9Z"/>

        <path id="melt3_border" class="ice_parts"
            d="M1010.5,285.1s12.6,4.5,16.2-7.6c0,0,2.7-7.7-4.5-19.3,0,0-.4-8.7,9.1-28.5s-10.8-31.8-11.3-30.4"/>

        <path id="melt4_inside" fill="#f5f2ee"
            d="M1009.3,293.2l-6,25.9a42.7,42.7,0,0,0,22.9,13.2s6.6,1.5,8.8,2.4,10.6,6.6,10.6,6.6,7.4,6.7,6.6,11.2c-2.5,13.9-6.4,45.5,6.6,45.1s3-18.1,7.5-37.6-6.7-25.1-22.9-27.9-34.8-30-34.1-39.1v.2c-.1.5-.3.9-.4,1.3"/>
        <path id="melt4_border" class="ice_parts2"
            d="M1052,352s-8.4,41.8,4.3,45.9c0,0,12.2,2.6,9.1-16.1.1-5.3-.9-16.3,1.1-22.3s-1-19-6.5-21.9c-3.9-3.2-19.2-6.1-19.2-6.1s-22.3-7-31.3-38" />

        <path id="drop5" class="ice_parts" d="M958.1,517s-13.2,22.2-8.2,27.3c2.2,2.3,10.7,2.4,12.8,0C967.3,539.1,958.1,517,958.1,517ZZ"/>

        <path id="melt5_inside" fill="#f5f2ee"
            d="M981,452.3c-3,17.7-11.8,34.5-16.3,52-.8,3.2-2.1,8-4.5,10.3s-3.5.7-5.4,2.1-2.8,2.3-5.8,8.5c-1,9.8-3.7,20.1,0,24.8,2.1,2.7,13.3,5.3,15-1.5s.1-26.5.1-26.5,4.9-4,7-13.2c1.6-4.8,2.5-13,5-19.7,5.9-12.1,3.6-21.8,4.8-35.1C980.6,455,981.3,451.3,981,452.3Z"/>
        <path id="melt5_border" stroke-width="1px" stroke="black" fill="none"
            d="M952,518s-8.5,24.5-2.5,32.5c2.3,3.6,15,6,15-8.3-.5-18.7.2-20.1.2-20.1s5.1-2.7,8-20.6c0,0,1-10.7,4.9-15.4s3.9-33.6,3.9-33.6" />

        
        <!--  S  U  N -->
        <g id="sun">
            <circle id="shine" filter="url(#filter_sunBlur)" fill="rgba(255,206,44,0.6)" cx="332" cy="32" r="183" />
            <path  id="s5" fill="#ff952c" d="M500.7-59.8c-14.1-12-34.2-8.5-50.8-12.7s-29.8-14.2-41.7-27c-25-27.3-47.1-70.1-89.9-42.5-16.4,10.5-28,27-44.5,37.8s-33.1,16-51.1,21.8c-16.3,5.3-37.7,11.1-46.8,27.3-10.6,18.8,3.3,37.2,4.6,56.3,2.6,37.5-37.9,65.9-30.2,103.8,7,34.4,59.2,37.6,81.2,60.2,27,27.7,37.4,66.5,83.7,48.7,16.8-6.4,30.7-18.7,47.8-24.4,23.1-7.8,47.2-3.8,71-6.2,54.8-5.4,45.5-63.3,52.2-104.4,4.2-25.9,11.7-50.4,19.7-75.4C512.4-16.4,519.4-43.7,500.7-59.8Z"/>
            <circle id="s4" fill="#ffcb4a"  cx="332.4" cy="36.3" r="135.8"/>
            <path id="s3" fill="#ffdc82" d="M426.8-27c-19.4-43.1-64.1-63.7-109.6-58-47.7,5.8-88,34.1-100.9,82.8-6.3,23.8,5.1,47.8,22.6,63.8,8.7,8,19.2,13,28.8,19.6s16.8,16,24.2,26.1c25.7,35.3,75.5,33.7,108,8.6C441,84.2,447.2,18.3,426.8-27Z"/>
            <path id="s2" fill="#ffe6a6" d="M416.5-8.3c-4.4-40-37.6-62.6-74.9-66.7-15.7-1.8-34.8-2.1-48.5,6.6C274.4-56.5,276.2-37.8,278.2-19s-5,39.8,11.6,53.4c12.8,10.5,37,19.3,52.7,23.4C385.6,69.1,421.1,34.7,416.5-8.3Z"/>
            <path id="s1" fill="#ffeec2"  d="M375.3,23.5c-5.1,16.7-28,24.5-51,17.4s-37.7-26.3-32.5-43,27.9-24.6,51-17.5S380.4,6.7,375.3,23.5Z"/>
        </g>



        <!-- S M I L    A N I M A T I O N -->

        <!-- PUPIL LEFT -->
        <animateTransform
            xlink:href="#pupil_left"
            attributeName="transform" 
            type="translate"
            dur="2s" 
            begin="0" 
            repeatCount="indefinite" 
            values="0 0 ; -7 2 ; 0 0"
        />

        <!-- PUPIL RIGHT -->
        <animateTransform
            xlink:href="#pupil_right"
            attributeName="transform" 
            type="translate"
            dur="2s" 
            begin="0" 
            repeatCount="indefinite" 
            values="0 0 ; -7 2 ; 0 0"
        />

        <!-- EYEBROW LEFT -->
        <animate 
            xlink:href="#eyebrow_left"
            attributeName="d" 
            dur="2s" 
            begin="0" 
            fill="freeze"
            rep.........完整代码请登录后点击上方下载按钮下载查看