svg+css实现奖杯跳动杯中星星跳跃动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+css实现奖杯跳动杯中星星跳跃动画效果代码
代码标签: 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% { transform: matrix(0.7775726318, -0.6287841797, 0.6287841797, 0.7775726318, 266.1, 374.05); animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97); } 30.252100840336134% { transform: matrix(0.7775726318, -0.6287841797, 0.6287841797, 0.7775726318, 266.1, 374.05); animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97); } 49.57983193277311% { transform: matrix(0.7248535156, 0.6888275146, -0.6888275146, 0.7248535156, 361.8, 151.7); opacity: 1; animation-timing-function: ease-in; } 67.22689075630252% { transform: matrix(-0.5883178711, 0.80859375, -0.80859375, -0.5883178711, 413.4, 412.4); opacity: 0; animation-timing-function: linear; } 100% { transform: matrix(-0.5883178711, 0.80859375, -0.80859375, -0.5883178711, 413.4, 412.4); opacity: 0; animation-timing-function: ease-out; } } @keyframes confetti4 { 0% { transform: matrix(0.2588195801, 0.9659118652, -0.9659118652, 0.2588195801, 216.25, 373.3); animation-timing-function: ease-in; } 28.57142857142857% { transform: matrix(0.2588195801, 0.9659118652, -0.9659118652, 0.2588195801, 250.05, 373.3); animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97); } 49.57983193277311% { transform: matrix(-0.9658660889, 0.2587890625, -0.2587890625, -0.9658660889, 216.5, 54.4); opacity: 1; animation-timing-function: ease-in; } 70.58823529411765% { transform: matrix(0.4999389648, -0.8659667969, 0.8659667969, 0.4999389648, 202.55, 204.95); opacity: 0; animation-timing-function: ease-out; } 100% { transform: matrix(0.4999389648, -0.8659667969, 0.8659667969, 0.4999389648, 202.55, 204.95); opacity: 0; animation-timing-function: ease-out; } } @keyframes medal { 0% { transform: matrix(1, 0, 0, 1, 280.15, 446.9); animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97); } 10.084033613445378% { transform: matrix(1, 0, 0, 1, 280.15, 477.75); animation-timing-function: ease-in; } 13.445378151260504% { transform: matrix(1, 0, 0, 1, 280.15, 477.75); animation-timing-function: ease-in; } 18.487394957983195% { transform: matrix(1, 0, 0, 1, 280.15, 432.05); animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97); } 28.57142857142857% { transform: matrix(1, 0, 0, 1, 249.15, 349.75); animation-timing-function: ease-in; } 36.134453781512605% { transform: matrix(1, 0, 0, 1, 249.15, 349.75); animation-timing-function: ease-in; } 45.378151260504204% { transform: matrix(1, 0, 0, 1, 280.15, 432.05); animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97); } 51.26050420168067% { transform: matrix(1, 0, 0, 1, 280.15, 477.75); animation-timing-function: ease-in; } 59.66386554621849% { transform: matrix(1, 0, 0, 1, 280.15, 446.9); animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97); } 100% { transform: matrix(1, 0, 0, 1, 280.15, 446.9); animation-timing-function: linear; } } @keyframes base { 0% { transform: matrix(1, 0, 0, 1, 250, 747.2); animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97); } 10.084033613445378% { transform: matrix(1, 0, 0, 0.8267211914, 250, 747.2); animation-timing-function: ease-in; } 13.445378151260504% { transform: matrix(1, 0, 0, 0.8267211914, 250, 747.2); animation-timing-function: ease-in; } 18.487394957983195% { transform: matrix(1, 0, 0, 1.092956543, 250, 747.2); animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97); } 28.57142857142857% { transform: matrix(0.8340454102, 0, 0, 1.092956543, 250, 678.7); animation-timing-function: ease-in; } 36.134453781512605% { transform: matrix(0.8340454102, 0, 0, 1.092956543, 250, 678.7); animation-timing-function: ease-in; } 45.378151260504204% { transform: matrix(1, 0, 0, 1.092956543, 250, 747.2); animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97); } 51.26050420168067% { transform: matrix(1, 0, 0, 0.8267211914, 250, 747.2); animation-timing-function: ease-in; } 59.66386554621849% { transform: matrix(1, 0, 0, 1, 250, 747.2); animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97); } 100% { transform: matrix(1, 0, 0, 1, 250, 747.2); animation-timing-function: linear; } } @keyframes confetti5 { 0% { transform: matrix(0.866027832, -0.4999847412, 0.4999847412, 0.866027832, 207.45, 416.7); animation-timing-function: ease-in; } 22.689075630252102% { transform: matrix(0.866027832, -0.4999847412, 0.4999847412, 0.866027832, 250, 416.7); animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97); } 44.537815126050425% { transform: matrix(0.7070770264, 0.7070922852, -0.7070922852, 0.7070770264, 348.55, 49.15); opacity: 1; animation-timing-function: ease-in; } 65.54621848739495% { transform: matrix(-0.9658508301, 0.2588195801, -0.2588195801, -0.9658508301, 417.15, 198.9); opacity: 0; animation-timing-function: ease-out; } 100% { transform: matrix(-0.9658508301, 0.2588195801, -0.2588195801, -0.9658508301, 417.15, 198.9); opacity: 0; animation-timing-function: ease-out; } } @keyframes medalBack { 0% { transform: matrix(1, 0, 0, 1, 307.85, 317.15); animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97); } 10.084033613445378% { transform: matrix(1, 0, 0, 1, 307.85, 348); animation-timing-function: ease-in; } 13.445378151260504% { transform: matrix(1, 0, 0, 1, 307.85, 348); animation-timing-function: ease-in; } 18.487394957983195% { transform: matrix(1, 0, 0, 1, 307.85, 302.3); animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97); } 28.57142857142857% { transform: matrix(1, 0, 0, 1, 276.85, 220); animation-timing-function: ease-in; } 36.134453781512605% { transform: matrix(1, 0, 0, 1, 276.85, 220); animation-timing-function: ease-in; } 45.378151260504204% { transform: matrix(1, 0, 0, 1, 307.85, 302.3); animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97); } 51.26050420168067% { transform: matrix(1, 0, 0, 1, 307.85, 348); animation-timing-function: ease-in; } 59.66386554621849% { transform: matrix(1, 0, 0, 1, 307.85, 317.15); animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97); } 100% { transform: matrix(1, 0, 0, 1, 307.85, 317.15); animation-timing-function: linear; } } #confetti9 { animation: confetti9 1.9833333333s infinite; animation-delay: 0s; } #confetti6 { animation: confetti6 1.9833333333s infinite; animation-delay: 0s; } #confetti11 { animation: confetti11 1.9833333333s infinite; animation-delay: 0s; } #confetti2 { animation: confetti2 1.9833333333s infinite; animation-delay: 0s; } #confetti7 { animation: confetti7 1.9833333333s infinite; animation-delay: 0s; } #star1 { animation: star1 1.9833333333s infinite; animation-delay: 0s; } #confetti3 { animation: confetti3 1.9833333333s infinite; animation-delay: 0s; } #confetti1 { anim.........完整代码请登录后点击上方下载按钮下载查看
网友评论0