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;
  }
  22.689075630252102% {
    transform: matrix(0.5, -0.8660125732, 0.8660125732, 0.5, 249.95, 408.9);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  46.21848739495798% {
    transform: matrix(-0.8660125732, -0.5, 0.5, -0.8660125732, 380.55, 80.75);
    opacity: 1;
    animation-timing-function: ease-in;
  }
  67.22689075630252% {
    transform: matrix(-0.2587890625, 0.9658813477, -0.9658813477, -0.2587890625, 442.5, 257.05);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  100% {
    transform: matrix(-0.2587890625, 0.9658813477, -0.9658813477, -0.2587890625, 442.5, 257.05);
    opacity: 0;
    animation-timing-function: ease-out;
  }
}
@keyframes star1 {
  0% {
    transform: matrix(0.6024169922, 0.7981567383, -0.7981567383, 0.6024169922, 296, 429.35);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  19.327731092436977% {
    transform: matrix(0.6024169922, 0.7981567383, -0.7981567383, 0.6024169922, 286, 429.35);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  42.857142857142854% {
    transform: matrix(-0.712677002, 0.7014160156, -0.7014160156, -0.712677002, 292.5, 104.15);
    opacity: 1;
    animation-timing-function: ease-in;
  }
  64.70588235294117% {
    transform: matrix(-0.7884521484, -0.6150512695, 0.6150512695, -0.7884521484, 300.3, 344.2);
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    transform: matrix(-0.7884521484, -0.6150512695, 0.6150512695, -0.7884521484, 300.3, 344.2);
    opacity: 0;
    animation-timing-function: ease-out;
  }
}
@keyframes confetti3 {
  0% {
    transform: matrix(0.866027832, 0.4999847412, -0.4999847412, 0.866027832, 192.1, 376.55);
    animation-timing-function: ease-in;
  }
  21.008403361344538% {
    transform: matrix(0.866027832, 0.4999847412, -0.4999847412, 0.866027832, 250, 376.55);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  43.69747899159664% {
    transform: matrix(-0.9658813477, 0.2587890625, -0.2587890625, -0.9658813477, 119.85, 46.45);
    opacity: 1;
    animation-timing-function: ease-in;
  }
  63.86554621848739% {
    transform: matrix(0.2587890625, -0.9658813477, 0.9658813477, 0.2587890625, 64.4, 210.5);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  100% {
    transform: matrix(0.2587890625, -0.9658813477, 0.9658813477, 0.2587890625, 64.4, 210.5);
    opacity: 0;
    animation-timing-function: ease-out;
  }
}
@keyframes confetti1 {
  0% {
    transform: matrix(0.2588195801, 0.9659118652, -0.9659118652, 0.2588195801, 179.6, 389.35);
    animation-timing-function: ease-in;
  }
  21.008403361344538% {
    transform: matrix(0.2588195801, 0.9659118652, -0.9659118652, 0.2588195801, 250.05, 389.35);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  42.857142857142854% {
    transform: matrix(-0.2587890625, 0.9659118652, -0.9659118652, -0.2587890625, 159.45, 71.2);
    opacity: 1;
    animation-timing-function: ease-in;
  }
  67.22689075630252% {
    transform: matrix(0.9659118652, 0.2587890625, -0.2587890625, 0.9659118652, 145.7, 200.85);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  100% {
    transform: matrix(0.9659118652, 0.2587890625, -0.2587890625, 0.9659118652, 145.7, 200.85);
    opacity: 0;
    animation-timing-function: ease-out;
  }
}
@keyframes confetti8 {
  0% {
    transform: matrix(0.7070922852, -0.7070922852, 0.7070922852, 0.7070922852, 176.15, 423.05);
    animation-timing-function: ease-in;
  }
  21.84873949579832% {
    transform: matrix(0.7070922852, -0.7070922852, 0.7070922852, 0.7070922852, 249.95, 423.05);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  44.537815126050425% {
    transform: matrix(0, -0.9999694824, 0.9999694824, 0, 123.05, 130.6);
    opacity: 1;
    animation-timing-function: ease-in;
  }
  63.02521008403361% {
    transform: matrix(0.9658660889, 0.2587738037, -0.2587738037, 0.9658660889, 96.7, 292.15);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  100% {
    transform: matrix(0.9658660889, 0.2587738037, -0.2587738037, 0.9658660889, 96.7, 292.15);
    opacity: 0;
    animation-timing-function: ease-out;
  }
}
@keyframes star2 {
  0% {
    transform: matrix(0.5, -0.8660125732, 0.8660125732, 0.5, 210.4, 404.9);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  23.52941176470588% {
    transform: matrix(0.5, -0.8660125732, 0.8660125732, 0.5, 210.4, 392.05);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  44.537815126050425% {
    transform: matrix(-0.4999389648, 0.8659362793, -0.8659362793, -0.4999389648, 161.8, 152.8);
    opacity: 1;
    animation-timing-function: ease-in;
  }
  61.34453781512605% {
    transform: matrix(-0.4999389648, -0.8659667969, 0.8659667969, -0.4999389648, 135.2, 395.15);
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    transform: matrix(-0.4999389648, -0.8659667969, 0.8659667969, -0.4999389648, 135.2, 395.15);
    opacity: 0;
    animation-timing-function: ease-out;
  }
}
@keyframes handleR {
  0% {
    transform: matrix(1, 0, 0, 1, 348.4, 430.85);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  10.084033613445378% {
    transform: matrix(1, 0, 0, 1, 348.4, 461.7);
    animation-timing-function: ease-in;
  }
  13.445378151260504% {
    transform: matrix(1, 0, 0, 1, 348.4, 461.7);
    animation-timing-function: ease-in;
  }
  18.487394957983195% {
    transform: matrix(1, 0, 0, 1, 348.4, 416);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  28.57142857142857% {
    transform: matrix(0.8685302734, 0, 0, 1, 336.9, 347.5);
    animation-timing-function: ease-in;
  }
  36.134453781512605% {
    transform: matrix(0.8685302734, 0, 0, 1, 336.9, 347.5);
    animation-timing-function: ease-in;
  }
  45.378151260504204% {
    transform: matrix(1, 0, 0, 1, 348.4, 416);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  51.26050420168067% {
    transform: matrix(1, 0, 0, 1, 348.4, 461.7);
    animation-timing-function: ease-in;
  }
  59.66386554621849% {
    transform: matrix(1, 0, 0, 1, 348.4, 430.85);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  100% {
    transform: matrix(1, 0, 0, 1, 348.4, 430.85);
    animation-timing-function: linear;
  }
}
@keyframes confetti10 {
  0% {
    transform: matrix(0, 1, -1, 0, 248.45, 409.15);
    animation-timing-function: ease-in;
  }
  27.73109243697479% {
    transform: matrix(0, 1, -1, 0, 250.05, 409.15);
    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  }
  48.739495798319325% {
    transform: matrix(1, 0, 0, 1, 248.45, 116.65);
    opacity: 1;
    animation-timing-function: ease-in;
  }
  63.86554621848739% {
    transform: matrix(0.2588195801, -0.9659118652, 0.9659118652, 0.2588195801, 248.45, 238.05);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  100% {
    transform: matrix(0.2588195801, -0.9659118652, 0.9659118652, 0.2588195801, 248.45, 238.05);
    opacity: 0;
    animation-timing-function: ease-out;
  }
}
@keyframes star3 {
  0% {
    tra.........完整代码请登录后点击上方下载按钮下载查看