svg雪糕布局动画-html代码-BFW代码库

svg雪糕布局动画

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
.slice-1,
.drop {
  fill: #FF82C1;
}

.slice-2 {
  fill: #A6009B;
}

.slice-3 {
  fill: #5633AB;
}

.stick {
  stroke: #E8C37E;
}

body {
  margin: 0;
}

svg {
  display: block;
  width: 100vw;
  height: 100vh;
}

svg * {
  transform-box: fill-box;
  transform-origin: bottom;
}

.popsicle {
  animation: hover 5.6s infinite;
}

@keyframes hover {
  0% {
    transform: translateY(-45px);
  }
  23.5% {
    transform: translateY(-45px);
  }
  25% {
    transform: translateY(-30px);
  }
  26.8571428571% {
    transform: translateY(-30px);
  }
  28.5714285714% {
    transform: translateY(-15px);
  }
  30.2142857143% {
    transform: translateY(-15px);
  }
  32.1428571429% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-45px);
  }
}
@keyframes slice-in-1 {
  0% {
    visibility: hidden;
  }
  17.8571428571% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-730px) scaleY(1.2);
  }
  19.2857142857% {
    opacity: 1;
  }
  23.5% {
    transform: translateY(-20px) scaleY(1.2);
    animation-timing-function: ease-out;
  }
  25% {
    transform: none;
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 0;
  }
}
@keyframes slice-in-2 {
  0% {
    visibility: hidden;
  }
  21.4285714286% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-730px) scaleY(1.2);
  }.........完整代码请登录后点击上方下载按钮下载查看