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

svg烈日下的冰淇淋动画效果代码

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看