svg+css实现奖杯跳动杯中星星跳跃动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg+css实现奖杯跳动杯中星星跳跃动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@keyframes confetti9 {
  0% {
    transform: matrix(0.2588195801, -0.9659118652, 0.9659118652, 0.2588195801, 317.85, 429.15);
    animation-timing-function: ease-in;
  }
  21.008403361344538% {
    transform: matrix(0.2588195801, -0.9659118652, 0.9659118652, 0.2588195801, 250, 429.15);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  42.857142857142854% {
    transform: matrix(-0.9999694824, 0, 0, -0.9999694824, 351.4, 136.85);
    opacity: 1;
    animation-timing-function: ease-in;
  }
  61.34453781512605% {
    transform: matrix(0.0000152588, 0.9999237061, -0.9999237061, 0.0000152588, 394.55, 354.55);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  100% {
    transform: matrix(0.0000152588, 0.9999237061, -0.9999237061, 0.0000152588, 394.55, 354.55);
    opacity: 0;
    animation-timing-function: ease-out;
  }
}
@keyframes confetti6 {
  0% {
    transform: matrix(0.7070922852, -0.7070922852, 0.7070922852, 0.7070922852, 273.15, 383.75);
    animation-timing-function: ease-in;
  }
  21.008403361344538% {
    transform: matrix(0.7070922852, -0.7070922852, 0.7070922852, 0.7070922852, 249.95, 383.75);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  42.857142857142854% {
    transform: matrix(-0.9658813477, -0.2587890625, 0.2587890625, -0.9658813477, 273.25, 62.2);
    opacity: 1;
    animation-timing-function: ease-in;
  }
  63.02521008403361% {
    transform: matrix(0.2588195801, 0.9658813477, -0.9658813477, 0.2588195801, 322.1, 227.75);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  100% {
    transform: matrix(0.2588195801, 0.9658813477, -0.9658813477, 0.2588195801, 322.1, 227.75);
    opacity: 0;
    animation-timing-function: ease-out;
  }
}
@keyframes confetti11 {
  0% {
    transform: matrix(-0.965927124, 0.2587890625, -0.2587890625, -0.965927124, 236, 421.95);
    animation-timing-function: ease-in;
  }
  21.008403361344538% {
    transform: matrix(-0.965927124, 0.2587890625, -0.2587890625, -0.965927124, 250.05, 421.95);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  42.016806722689076% {
    transform: matrix(-0.4999847412, 0.8659667969, -0.8659667969, -0.4999847412, 278.8, 164.8);
    opacity: 1;
    animation-timing-function: ease-in;
  }
  58.82352941176471% {
    transform: matrix(-0.9658508301, 0.2587890625, -0.2587890625, -0.9658508301, 310.45, 303.4);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  100% {
    transform: matrix(-0.9658508301, 0.2587890625, -0.2587890625, -0.9658508301, 310.45, 303.4);
    opacity: 0;
    animation-timing-function: ease-out;
  }
}
@keyframes cup {
  0% {
    transform: matrix(1, 0, 0, 1, 250, 578.35);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  10.084033613445378% {
    transform: matrix(1, 0, 0, 1, 250, 609.2);
    animation-timing-function: ease-in;
  }
  13.445378151260504% {
    transform: matrix(1, 0, 0, 1, 250, 609.2);
    animation-timing-function: ease-in;
  }
  18.487394957983195% {
    transform: matrix(1, 0, 0, 1, 250, 563.5);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  28.57142857142857% {
    transform: matrix(1, 0, 0, 1, 250, 495);
    animation-timing-function: ease-in;
  }
  36.134453781512605% {
    transform: matrix(1, 0, 0, 1, 250, 495);
    animation-timing-function: ease-in;
  }
  45.378151260504204% {
    transform: matrix(1, 0, 0, 1, 250, 563.5);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  51.26050420168067% {
    transform: matrix(1, 0, 0, 1, 250, 609.2);
    animation-timing-function: ease-in;
  }
  59.66386554621849% {
    transform: matrix(1, 0, 0, 1, 250, 578.35);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  100% {
    transform: matrix(1, 0, 0, 1, 250, 578.35);
    animation-timing-function: linear;
  }
}
@keyframes shadow {
  0% {
    transform: matrix(1, 0, 0, 1, 250, 742.25);
    opacity: 1;
    animation-timing-function: linear;
  }
  18.487394957983195% {
    transform: matrix(1, 0, 0, 1, 250, 742.25);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  28.57142857142857% {
    transform: matrix(0.6494445801, 0, 0, 0.6494445801, 250, 742.25);
    opacity: 0.46875;
    animation-timing-function: ease-in;
  }
  36.134453781512605% {
    transform: matrix(0.6494445801, 0, 0, 0.6494445801, 250, 742.25);
    opacity: 0.46875;
    animation-timing-function: ease-in;
  }
  45.378151260504204% {
    transform: matrix(1, 0, 0, 1, 250, 742.25);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  100% {
    transform: matrix(1, 0, 0, 1, 250, 742.25);
    opacity: 1;
    animation-timing-function: linear;
  }
}
@keyframes confetti2 {
  0% {
    transform: matrix(1, 0, 0, 1, 210.4, 392.1);
    animation-timing-function: ease-in;
  }
  21.84873949579832% {
    transform: matrix(1, 0, 0, 1, 250, 392.1);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  43.69747899159664% {
    transform: matrix(0.2588195801, -0.9659118652, 0.9659118652, 0.2588195801, 190.3, 141.5);
    opacity: 1;
    animation-timing-function: ease-in;
  }
  65.54621848739495% {
    transform: matrix(0.2588195801, -0.9659118652, 0.9659118652, 0.2588195801, 192.5, 291);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  100% {
    transform: matrix(0.2588195801, -0.9659118652, 0.9659118652, 0.2588195801, 192.5, 291);
    opacity: 0;
    animation-timing-function: ease-out;
  }
}
@keyframes handleL {
  0% {
    transform: matrix(1, 0, 0, 1, 147.35, 429.3);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  10.084033613445378% {
    transform: matrix(1, 0, 0, 1, 147.35, 460.15);
    animation-timing-function: ease-in;
  }
  13.445378151260504% {
    transform: matrix(1, 0, 0, 1, 147.35, 460.15);
    animation-timing-function: ease-in;
  }
  18.487394957983195% {
    transform: matrix(1, 0, 0, 1, 147.35, 414.45);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  28.57142857142857% {
    transform: matrix(0.7661743164, 0, 0, 1, 158.85, 345.95);
    animation-timing-function: ease-in;
  }
  36.134453781512605% {
    transform: matrix(0.7661743164, 0, 0, 1, 158.85, 345.95);
    animation-timing-function: ease-in;
  }
  45.378151260504204% {
    transform: matrix(1, 0, 0, 1, 147.35, 414.45);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  51.26050420168067% {
    transform: matrix(1, 0, 0, 1, 147.35, 460.15);
    animation-timing-function: ease-in;
  }
  59.66386554621849% {
    transform: matrix(1, 0, 0, 1, 147.35, 429.3);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  100% {
    transform: matrix(1, 0, 0, 1, 147.35, 429.3);
    animation-timing-function: linear;
  }
}
@keyframes confetti7 {
  0% {
    transform: matrix(0.5, -0.8660125732, 0.8660125732, 0.5, 335.9, 408.9);
    animation-timing-function: ease-in;
  }.........完整代码请登录后点击上方下载按钮下载查看