{"id":11541,"date":"2024-03-23T15:45:05","date_gmt":"2024-03-23T10:45:05","guid":{"rendered":"https:\/\/codehim.com\/?p=11541"},"modified":"2024-03-23T15:45:05","modified_gmt":"2024-03-23T10:45:05","slug":"trophy-animation-using-html-css","status":"publish","type":"post","link":"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/","title":{"rendered":"Trophy Animation Using HTML & CSS"},"content":{"rendered":"

This code snippet helps you to create a trophy animation using HTML and CSS. It generates confetti and star animations. The confetti moves randomly.<\/p>\n

Moreover, you can use this code to create a trophy animation for your website or presentation. It adds visual appeal and engagement to your content. The animation is created using HTML and CSS, making it easy to integrate and customize.<\/p>\n

How to Create Trophy Animation Using Html & Css<\/h2>\n

1. First of all, load the Normalize CSS<\/a> and Prefixfree JS<\/a> by adding the following CDN links into the head tag of your HTML document.<\/p>\n

<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/5.0.0\/normalize.min.css\">\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prefixfree\/1.0.7\/prefixfree.min.js\"><\/script><\/pre>\n
2. In the HTML file, define the structure for your trophy animation using <div><\/code> elements. Include an outer container <div><\/code> with a class of trophy-container<\/code>, and nested <div><\/code> elements for different parts of the trophy, like the base and the cup.<\/p>\n
<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" version=\"1.1\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" preserveAspectRatio=\"none\" x=\"0px\" y=\"0px\" width=\"500px\" height=\"800px\" viewBox=\"0 0 500 800\">\r\n\t<defs>\r\n\t\t<radialGradient id=\"Gradient_1\" gradientUnits=\"userSpaceOnUse\" cx=\"0\" cy=\"0\" r=\"211.4\" fx=\"0\" fy=\"0\" gradientTransform=\"matrix( 1, 0, 0, 1, 0,0) \" spreadMethod=\"pad\">\r\n\t\t\t<stop offset=\"0%\" stop-color=\"#9293D6\" \/>\r\n\r\n\t\t\t<stop offset=\"100%\" stop-color=\"#9293D6\" stop-opacity=\"0\" \/>\r\n\t\t<\/radialGradient>\r\n\r\n\t\t<radialGradient id=\"Gradient_2\" gradientUnits=\"userSpaceOnUse\" cx=\"0\" cy=\"0\" r=\"134.5\" fx=\"0\" fy=\"0\" gradientTransform=\"matrix( 1.0000000000000002, 0, 0, 1.0000000000000002, 37.7,-44.75) \" spreadMethod=\"pad\">\r\n\t\t\t<stop offset=\"0%\" stop-color=\"#C9EBFA\" \/>\r\n\r\n\t\t\t<stop offset=\"100%\" stop-color=\"#57ABDE\" \/>\r\n\t\t<\/radialGradient>\r\n\r\n\t\t<radialGradient id=\"Gradient_3\" gradientUnits=\"userSpaceOnUse\" cx=\"0\" cy=\"0\" r=\"66.10000000000002\" fx=\"0\" fy=\"0\" gradientTransform=\"matrix( 0.9999999999999998, 0, 0, 0.9999999999999998, 23.6,-99.85) \" spreadMethod=\"pad\">\r\n\t\t\t<stop offset=\"0%\" stop-color=\"#C9E5FA\" \/>\r\n\r\n\t\t\t<stop offset=\"100%\" stop-color=\"#57A0DE\" \/>\r\n\r\n\t\t\t<stop offset=\"100%\" stop-color=\"#5CBDE0\" \/>\r\n\t\t<\/radialGradient>\r\n\r\n\t\t<radialGradient id=\"Gradient_4\" gradientUnits=\"userSpaceOnUse\" cx=\"0\" cy=\"0\" r=\"59.9\" fx=\"0\" fy=\"0\" gradientTransform=\"matrix( 1, 0, 0, 1, 17.85,-147.3) \" spreadMethod=\"pad\">\r\n\t\t\t<stop offset=\"0%\" stop-color=\"#BBD5E8\" \/>\r\n\r\n\t\t\t<stop offset=\"100%\" stop-color=\"#529FCE\" \/>\r\n\t\t<\/radialGradient>\r\n\r\n\t\t<radialGradient id=\"Gradient_5\" gradientUnits=\"userSpaceOnUse\" cx=\"0\" cy=\"0\" r=\"107.75\" fx=\"0\" fy=\"0\" gradientTransform=\"matrix( 1, 0, 0, 1, -21.9,21.95) \" spreadMethod=\"pad\">\r\n\t\t\t<stop offset=\"0%\" stop-color=\"#A8D4F1\" \/>\r\n\r\n\t\t\t<stop offset=\"100%\" stop-color=\"#57A0DE\" \/>\r\n\t\t<\/radialGradient>\r\n\r\n\t\t<radialGradient id=\"Gradient_6\" gradientUnits=\"userSpaceOnUse\" cx=\"0\" cy=\"0\" r=\"242.49999999999997\" fx=\"0\" fy=\"0\" gradientTransform=\"matrix( 1.0000000000000002, 0, 0, 1.0000000000000002, 36.4,-58.55) \" spreadMethod=\"pad\">\r\n\t\t\t<stop offset=\"0%\" stop-color=\"#C9E9FA\" \/>\r\n\r\n\t\t\t<stop offset=\"100%\" stop-color=\"#57A0DE\" \/>\r\n\t\t<\/radialGradient>\r\n\r\n\t\t<linearGradient id=\"Gradient_7\" gradientUnits=\"userSpaceOnUse\" x1=\"-131.25\" y1=\"-258.1\" x2=\"131.25\" y2=\"-258.1\" spreadMethod=\"pad\">\r\n\t\t\t<stop offset=\"0%\" stop-color=\"#5599FF\" \/>\r\n\r\n\t\t\t<stop offset=\"100%\" stop-color=\"#D5E6FF\" \/>\r\n\t\t<\/linearGradient>\r\n\r\n\t\t<radialGradient id=\"Gradient_8\" gradientUnits=\"userSpaceOnUse\" cx=\"0\" cy=\"0\" r=\"137.70000000000005\" fx=\"0\" fy=\"0\" gradientTransform=\"matrix( 0.9999999999999997, 0, 0, 0.9999999999999997, 76.45,-43.95) \" spreadMethod=\"pad\">\r\n\t\t\t<stop offset=\"0%\" stop-color=\"#A8D4F1\" \/>\r\n\r\n\t\t\t<stop offset=\"100%\" stop-color=\"#57A0DE\" \/>\r\n\t\t<\/radialGradient>\r\n\r\n\t\t<radialGradient id=\"Gradient_9\" gradientUnits=\"userSpaceOnUse\" cx=\"0\" cy=\"0\" r=\"77.75\" fx=\"0\" fy=\"0\" gradientTransform=\"matrix( 1, 0, 0, 1, 26.6,-22.8) \" spreadMethod=\"pad\">\r\n\t\t\t<stop offset=\"0%\" stop-color=\"#FFF774\" \/>\r\n\r\n\t\t\t<stop offset=\"100%\" stop-color=\"#FFCC00\" \/>\r\n\t\t<\/radialGradient>\r\n\r\n\t\t<radialGradient id=\"Gradient_10\" gradientUnits=\"userSpaceOnUse\" cx=\"0\" cy=\"0\" r=\"51.1\" fx=\"0\" fy=\"0\" gradientTransform=\"matrix( 1, 0, 0, 1, -19.85,10.05) \" spreadMethod=\"pad\">\r\n\t\t\t<stop offset=\"0%\" stop-color=\"#FFF774\" \/>\r\n\r\n\t\t\t<stop offset=\"100%\" stop-color=\"#FFCC00\" \/>\r\n\t\t<\/radialGradient>\r\n\r\n\t\t<radialGradient id=\"Gradient_11\" gradientUnits=\"userSpaceOnUse\" cx=\"0\" cy=\"0\" r=\"10.5\" fx=\"0\" fy=\"0\" gradientTransform=\"matrix( 1, 0, 0, 1, 0.15,-1.95) \" spreadMethod=\"pad\">\r\n\t\t\t<stop offset=\"0%\" stop-color=\"#FFF774\" \/>\r\n\r\n\t\t\t<stop offset=\"100%\" stop-color=\"#FFCC00\" \/>\r\n\t\t<\/radialGradient>\r\n\r\n\t\t<g id=\"Symbol_1_0_Layer0_0_FILL\">\r\n\t\t\t<path fill=\"url(#Gradient_1)\" stroke=\"none\" d=\"\r\nM -0.05 -209.05\r\nQ -86.6 -209.05 -147.85 -147.8 -209.05 -86.55 -209.05 0 -209.05 86.6 -147.85 147.8 -86.6 209.05 -0.05 209.05 86.55 209.05 147.8 147.8 209.05 86.6 209.05 0 209.05 -86.55 147.8 -147.8 86.55 -209.05 -0.05 -209.05 Z\" \/>\r\n\t\t<\/g>\r\n\r\n\t\t<g id=\"confetti_0_Layer0_0_FILL\">\r\n\t\t\t<path fill=\"#F0A8F9\" stroke=\"none\" d=\"\r\nM -0.45 -11.9\r\nQ -0.45 -12.35 -0.4 -12.8\r\nL -12.35 -12.8\r\nQ -12.4 -12.4 -12.4 -11.95 -12.4 -1.7 -5.15 5.55 2.15 12.85 12.4 12.85\r\nL 12.45 12.85 12.45 0.95\r\nQ 7.1 0.95 3.3 -2.8 -0.45 -6.6 -0.45 -11.9 Z\" \/>\r\n\t\t<\/g>\r\n\r\n\t\t<g id=\"star_0_Layer0_0_FILL\">\r\n\t\t\t<path fill=\"#C30DDB\" stroke=\"none\" d=\"\r\nM -6.65 -13.25\r\nL -22.3 -14.5 -16.3 0.05 -22.3 14.55 -6.65 13.3 5.3 23.5 9 8.25 22.35 0.05 9 -8.2 5.3 -23.45 -6.65 -13.25 Z\" \/>\r\n\t\t<\/g>\r\n\r\n\t\t<g id=\"base_0_Layer0_0_FILL\">\r\n\t\t\t<path fill=\"url(#Gradient_2)\" stroke=\"none\" d=\"\r\nM 94.8 -17.5\r\nQ 46.3 -42.45 40.4 -70.4\r\nL -40.9 -70.4\r\nQ -55.9 -29.8 -94 -17.45\r\nL 94.8 -17.5 Z\" \/>\r\n\r\n\t\t\t<path fill=\"url(#Gradient_3)\" stroke=\"none\" d=\"\r\nM 40.8 -87.9\r\nQ 34.6 -101.15 40.4 -114.4\r\nL -40.9 -114.4\r\nQ -35.65 -102.7 -40 -87.85\r\nL 40.8 -87.9 Z\" \/>\r\n\r\n\t\t\t<path fill=\"#5599FF\" stroke=\"none\" d=\"\r\nM 100.75 -2.6\r\nQ 103.35 -5.15 103.35 -8.75 103.35 -12.35 100.75 -14.95 98.45 -17.25 95.3 -17.45 95.05 -17.5 94.8 -17.5\r\nL -94 -17.45\r\nQ -94.3 -17.5 -94.6 -17.5 -98.2 -17.5 -100.8 -14.95 -103.35 -12.35 -103.35 -8.75 -103.35 -5.15 -100.8 -2.6 -98.4 -0.2 -95.2 0 -95.05 0 -94.9 0\r\nL 94.4 0\r\nQ 94.5 0 94.6 0 98.2 0 100.75 -2.6\r\nM 40.6 -70.4\r\nQ 44.2 -70.4 46.75 -73 49.35 -75.55 49.35 -79.15 49.35 -82.75 46.75 -85.35 44.45 -87.65 41.3 -87.85 41.05 -87.9 40.8 -87.9\r\nL -40 -87.85\r\nQ -40.3 -87.9 -40.6 -87.9 -44.2 -87.9 -46.8 -85.35 -49.35 -82.75 -49.35 -79.15 -49.35 -75.55 -46.8 -73 -44.4 -70.6 -41.2 -70.4 -41.05 -70.4 -40.9 -70.4\r\nL 40.4 -70.4\r\nQ 40.5 -70.4 40.6 -70.4\r\nM 40.6 -114.4\r\nQ 44.2 -114.4 46.75 -117 49.35 -119.55 49.35 -123.15 49.35 -126.75 46.75 -129.35 44.45 -131.65 41.3 -131.85 41.05 -131.9 29.55 -131.9\r\nL -30.35 -131.9\r\nQ -40.3 -131.9 -40.6 -131.9 -44.2 -131.9 -46.8 -129.35 -49.35 -126.75 -49.35 -123.15 -49.35 -119.55 -46.8 -117 -44.4 -114.6 -41.2 -114.4 -41.05 -114.4 -40.9 -114.4\r\nL 40.4 -114.4\r\nQ 40.5 -114.4 40.6 -114.4 Z\" \/>\r\n\r\n\t\t\t<path fill=\"url(#Gradient_4)\" stroke=\"none\" d=\"\r\nM 24.8 -171.4\r\nQ 12.95 -168.85 0 -168.85 -12.5 -168.85 -24 -171.2 -21.4 -150 -30.35 -131.9\r\nL 29.55 -131.9\r\nQ 23.3 -146.9 24.8 -171.4 Z\" \/>\r\n\t\t<\/g>\r\n\r\n\t\t<g id=\"handleL_0_Layer0_0_FILL\">\r\n\t\t\t<path fill=\"url(#Gradient_5)\" stroke=\"none\" d=\"\r\nM -24.6 -65.55\r\nL -24.55 -65.55\r\nQ -17.3 -63.05 -9.65 -59.3 -7.8 -58.4 -5.85 -59.05 -3.9 -59.75 -3 -61.6 -2.05 -63.45 -2.75 -65.4 -3.4 -67.4 -5.25 -68.3 -13.5 -72.35 -21.25 -75 -62.5 -89.6 -74.1 -64.25 -81.45 -49.35 -75.2 -34.25\r\nL -75.2 -34.3\r\nQ -70.9 -23.7 -56.95 -8.9 -56.85 -8.85 -56.85 -8.8 -40.7 7.2 -32.8 16.05 -19.35 30.95 -13.65 44.25 -6.15 61.85 -16.5 67.8 -22.75 70.9 -30.6 70.25 -32.65 70.05 -34.25 71.4 -35.8 72.7 -36 74.8 -36.15 76.85 -34.85 78.45 -33.5 80 -31.45 80.2 -20.65 81.1 -12 76.75\r\nL -12.05 76.75\r\nQ 7.3 67.9 -4.45 40.35 -10.65 25.75 -25.35 9.35 -33.4 0.4 -49.8 -15.9\r\nL -49.7 -15.75\r\nQ -62 -28.8 -65.95 -38.1 -70.45 -49.05 -65.15 -59.8 -55.9 -76.65 -24.6 -65.55 Z\" \/>\r\n\t\t<\/g>\r\n\r\n\t\t<g id=\"ribbonBack_0_Layer0_0_FILL\">\r\n\t\t\t<path fill=\"#5599FF\" stroke=\"none\" d=\"\r\nM -40.05 7.15\r\nL -40.05 7.2 -33.15 7.2 -48.1 -6.4 -40.05 7.15 Z\" \/>\r\n\r\n\t\t\t<path fill=\"#0066FF\" stroke=\"none\" d=\"\r\nM 24.95 7.15\r\nL 48.15 7.15 32.8 -7.15 24.95 7.15 Z\" \/>\r\n\t\t<\/g>\r\n\r\n\t\t<g id=\"cup_0_Layer0_0_FILL\">\r\n\t\t\t<path fill=\"url(#Gradient_6)\" stroke=\"none\" d=\"\r\nM 40.8 -7.3\r\nQ 61.9 -15.5 79.2 -32.8 109.45 -63.05 111.8 -104.9\r\nL 111.8 -249.35 -111.95 -249.35 -111.95 -115.6\r\nQ -111.95 -115.4 -111.95 -115.2 -112 -113.6 -112 -112 -112 -65.6 -79.2 -32.8 -61.55 -15.15 -40 -7 -32.25 -4.1 -24 -2.35 -12.5 0 0 0 12.95 0 24.8 -2.55 33.05 -4.3 40.8 -7.3 Z\" \/>\r\n\r\n\t\t\t<path fill=\"url(#Gradient_7)\" stroke=\"none\" d=\"\r\nM 122.3 -249.35\r\nQ 122.4 -249.35 122.5 -249.35 126.1 -249.35 128.65 -251.95 131.25 -254.5 131.25 -258.1 131.25 -261.7 128.65 -264.3 126.35 -266.6 123.2 -266.8 122.95 -266.85 122.7 -266.85\r\nL -121.9 -266.8\r\nQ -122.2 -266.85 -122.5 -266.85 -126.1 -266.85 -128.7 -264.3 -131.25 -261.7 -131.25 -258.1 -131.25 -254.5 -128.7 -251.95 -126.3 -249.55 -123.1 -249.35 -122.95 -249.35 -122.8 -249.35\r\nL -111.95 -249.35 111.8 -249.35 122.3 -249.35 Z\" \/>\r\n\t\t<\/g>\r\n\r\n\t\t<g id=\"handleR_0_Layer0_0_FILL\">\r\n\t\t\t<path fill=\"url(#Gradient_8)\" stroke=\"none\" d=\"\r\nM 24.55 -65.55\r\nL 24.6 -65.55\r\nQ 55.9 -76.65 65.15 -59.8 70.45 -49.05 65.95 -38.1 62 -28.8 49.7 -15.75\r\nL 49.8 -15.9\r\nQ 33.4 0.4 25.35 9.35 10.65 25.75 4.45 40.35 -7.3 67.9 12.05 76.75\r\nL 12 76.75\r\nQ 20.65 81.1 31.45 80.2 33.5 80 34.85 78.45 36.15 76.85 36 74.8 35.8 72.7 34.25 71.4 32.65 70.05 30.6 70.25 22.75 70.9 16.5 67.8 6.15 61.85 13.65 44.25 19.35 30.95 32.8 16.05 40.7 7.2 56.85 -8.8 56.85 -8.85 56.95 -8.9 70.9 -23.7 75.2 -34.3\r\nL 75.2 -34.25\r\nQ 81.45 -49.35 74.1 -64.25 62.5 -89.6 21.25 -75 13.5 -72.35 5.25 -68.3 3.4 -67.4 2.75 -65.4 2.05 -63.45 3 -61.6 3.9 -59.75 5.85 -59.05 7.8 -58.4 9.65 -59.3 17.3 -63.05 24.55 -65.55 Z\" \/>\r\n\t\t<\/g>\r\n\r\n\t\t<g id=\"coin_0_Layer1_0_FILL\">\r\n\t\t\t<path fill=\"#FFCD03\" stroke=\"none\" d=\"\r\nM -25.85 -52.85\r\nL -33.25 -65.8\r\nQ -38.95 -65.55 -38.85 -59.7\r\nL -38.85 -17.25\r\nQ -35.75 -24.15 -30 -29.95 -29.65 -30.3 -29.3 -30.6 -28.6 -31.3 -27.9 -31.9 -26.9 -32.8 -25.85 -33.6\r\nL -25.85 -52.85\r\nM 18 -65.85\r\nL 24.95 -52.85 24.95 -34.3\r\nQ 27.55 -32.35 29.95 -29.95 34.95 -24.95 37.95 -19.1\r\nL 37.95 -61.5\r\nQ 37.7 -65.6 33.6 -65.85\r\nL 30.15 -65.85 18 -65.85 Z\" \/>\r\n\r\n\t\t\t<path fill=\"#0066FF\" stroke=\"none\" d=\"\r\nM 24.95 -52.85\r\nL 18 -65.85 -3.25 -105.55 -12.35 -122.5 -12.35 -122.55 -20.4 -136.1 -72.7 -136.1 -65.6 -122.5 -33.25 -65.8 -25.85 -52.85 24.95 -52.85 Z\" \/>\r\n\r\n\t\t\t<path fill=\"#5599FF\" stroke=\"none\" d=\"\r\nM 52.65 -122.55\r\nL 60.5 -136.85 10.55 -136.85 -3.25 -105.55 18 -65.85 30.15 -65.85 52.65 -122.55 Z\" \/>\r\n\t\t<\/g>\r\n\r\n\t\t<g id=\"coin_0_Layer0_0_FILL\">\r\n\t\t\t<path fill=\"url(#Gradient_9)\" stroke=\"none\" d=\"\r\nM 37.95 -19.15\r\nQ 34.95 -25 29.95 -30 27.55 -32.4 24.95 -34.35 15.7 -41.2 4 -42.2 2.05 -42.4 0 -42.4 -12.3 -42.4 -22.1 -36.25 -24 -35.1 -25.85 -33.65 -26.9 -32.85 -27.9 -31.95 -28.6 -31.35 -29.3 -30.65 -29.65 -30.35 -30 -30 -35.75 -24.2 -38.85 -17.3 -42.4 -9.4 -42.4 0 -42.4 17.55 -30 29.95 -17.55 42.4 0 42.4 2.05 42.4 4 42.25 19 40.95 29.95 29.95 42.4 17.55 42.4 0 42.4 -10.5 37.95 -19.15\r\nM 2.7 -28.35\r\nQ 12.8 -27.5 20.15 -20.15 28.55 -11.8 28.55 0 28.55 11.8 20.15 20.15 12.8 27.55 2.7 28.45 1.4 28.55 0 28.55 -11.8 28.55 -20.15 20.15 -21.2 19.1 -22.1 18.05 -26.55 12.7 -27.9 6.1 -28.5 3.15 -28.5 0 -28.5 -3.15 -27.9 -6.05 -26.55 -12.7 -22.1 -18 -21.2 -19.1 -20.15 -20.15 -11.8 -28.5 0 -28.5 1.4 -28.5 2.7 -28.35 Z\" \/>\r\n\r\n\t\t\t<path fill=\"url(#Gradient_10)\" stroke=\"none\" d=\"\r\nM 20.15 -20.15\r\nQ 12.8 -27.5 2.7 -28.35 1.4 -28.5 0 -28.5 -11.8 -28.5 -20.15 -20.15 -21.2 -19.1 -22.1 -18 -26.55 -12.7 -27.9 -6.05 -28.5 -3.15 -28.5 0 -28.5 3.15 -27.9 6.1 -26.55 12.7 -22.1 18.05 -21.2 19.1 -20.15 20.15 -11.8 28.55 0 28.55 1.4 28.55 2.7 28.45 12.8 27.55 20.15 20.15 28.55 11.8 28.55 0 28.55 -11.8 20.15 -20.15\r\nM -3.4 -18.05\r\nL -3.05 -19.05 3.25 -19.05 15.25 14.35 13.9 14.35 9.45 14.35 7.05 7.55 -6.9 7.55 -7.25 8.55 -9.3 14.35 -9.95 14.35 -15 14.35 -3.4 -18.05 Z\" \/>\r\n\r\n\t\t\t<path fill=\"#FFCE05\" stroke=\"none\" d=\"\r\nM -7.25 8.55\r\nL -7.9 8.55 -9.95 14.35 -9.3 14.35 -7.25 8.55 Z\" \/>\r\n\r\n\t\t\t<path fill=\"#FFF570\" stroke=\"none\" d=\"\r\nM -7.25 8.55\r\nL -6.9 7.55 7.05 7.55 9.45 14.35 13.9 14.35 2.25 -18.05 -3.4 -18.05 -15 14.35 -9.95 14.35 -7.9 8.55 -7.25 8.55\r\nM -0.9 -11.45\r\nL -0.55 -10.5 0.1 -12.45 5.5 3.1 4.15 3.1 4.5 4.1 -6.4 4.1 -0.9 -11.45 Z\" \/>\r\n\r\n\t\t\t<path fill=\"url(#Gradient_11)\" stroke=\"none\" d=\"\r\nM 4.15 3.1\r\nL 5.5 3.1 0.1 -12.45 -0.55 -10.5 -5.4 3.1 4.15 3.1 Z\" \/>\r\n\r\n\t\t\t<path fill=\"#FFCD03\" stroke=\"none\" d=\"\r\nM -0.55 -10.5\r\nL -0.9 -11.45 -6.4 4.1 4.5 4.1 4.15 3.1 -5.4 3.1 -0.55 -10.5\r\nM -3.05 -19.05\r\nL -3.4 -18.05 2.25 -18.05 13.9 14.35 15.25 14.35 3.25 -19.05 -3.05 -19.05 Z\" \/>\r\n\t\t<\/g>\r\n\t<\/defs>\r\n\r\n\t<g id=\"shadow\" transform=\"matrix( 1, 0, 0, 1, 250,742.25) \">\r\n\t\t<g transform=\"matrix( 1, 0, 0, 0.1714935302734375, 0.1,0.05) \">\r\n\t\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t\t<use xlink:href=\"#Symbol_1_0_Layer0_0_FILL\" \/>\r\n\t\t\t<\/g>\r\n\t\t<\/g>\r\n\t<\/g>\r\n\r\n\t<g id=\"confetti1\" transform=\"matrix( 0.258819580078125, 0.965911865234375, -0.965911865234375, 0.258819580078125, 179.6,389.35) \">\r\n\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t<use xlink:href=\"#confetti_0_Layer0_0_FILL\" \/>\r\n\t\t<\/g>\r\n\t<\/g>\r\n\r\n\t<g id=\"confetti2\" transform=\"matrix( 1, 0, 0, 1, 210.4,392.1) \">\r\n\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t<use xlink:href=\"#confetti_0_Layer0_0_FILL\" \/>\r\n\t\t<\/g>\r\n\t<\/g>\r\n\r\n\t<g id=\"confetti3\" transform=\"matrix( 0.86602783203125, 0.4999847412109375, -0.4999847412109375, 0.86602783203125, 192.1,376.55) \">\r\n\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t<use xlink:href=\"#confetti_0_Layer0_0_FILL\" \/>\r\n\t\t<\/g>\r\n\t<\/g>\r\n\r\n\t<g id=\"confetti4\" transform=\"matrix( 0.258819580078125, 0.965911865234375, -0.965911865234375, 0.258819580078125, 216.25,373.3) \">\r\n\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t<use xlink:href=\"#confetti_0_Layer0_0_FILL\" \/>\r\n\t\t<\/g>\r\n\t<\/g>\r\n\r\n\t<g id=\"confetti5\" transform=\"matrix( 0.86602783203125, -0.4999847412109375, 0.4999847412109375, 0.86602783203125, 207.45,416.7) \">\r\n\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t<use xlink:href=\"#confetti_0_Layer0_0_FILL\" \/>\r\n\t\t<\/g>\r\n\t<\/g>\r\n\r\n\t<g id=\"confetti6\" transform=\"matrix( 0.70709228515625, -0.70709228515625, 0.70709228515625, 0.70709228515625, 273.15,383.75) \">\r\n\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t<use xlink:href=\"#confetti_0_Layer0_0_FILL\" \/>\r\n\t\t<\/g>\r\n\t<\/g>\r\n\r\n\t<g id=\"confetti7\" transform=\"matrix( 0.5, -0.8660125732421875, 0.8660125732421875, 0.5, 335.9,408.9) \">\r\n\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t<use xlink:href=\"#confetti_0_Layer0_0_FILL\" \/>\r\n\t\t<\/g>\r\n\t<\/g>\r\n\r\n\t<g id=\"confetti8\" transform=\"matrix( 0.70709228515625, -0.70709228515625, 0.70709228515625, 0.70709228515625, 176.15,423.05) \">\r\n\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t<use xlink:href=\"#confetti_0_Layer0_0_FILL\" \/>\r\n\t\t<\/g>\r\n\t<\/g>\r\n\r\n\t<g id=\"confetti9\" transform=\"matrix( 0.258819580078125, -0.965911865234375, 0.965911865234375, 0.258819580078125, 317.85,429.15) \">\r\n\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t<use xlink:href=\"#confetti_0_Layer0_0_FILL\" \/>\r\n\t\t<\/g>\r\n\t<\/g>\r\n\r\n\t<g id=\"confetti10\" transform=\"matrix( 0, 1, -1, 0, 248.45,409.15) \">\r\n\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t<use xlink:href=\"#confetti_0_Layer0_0_FILL\" \/>\r\n\t\t<\/g>\r\n\t<\/g>\r\n\r\n\t<g id=\"confetti11\" transform=\"matrix( -0.9659271240234375, 0.2587890625, -0.2587890625, -0.9659271240234375, 236,421.95) \">\r\n\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t<use xlink:href=\"#confetti_0_Layer0_0_FILL\" \/>\r\n\t\t<\/g>\r\n\t<\/g>\r\n\r\n\t<g id=\"star2\" transform=\"matrix( 0.5, -0.8660125732421875, 0.8660125732421875, 0.5, 210.4,404.9) \">\r\n\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t<use xlink:href=\"#star_0_Layer0_0_FILL\" \/>\r\n\t\t<\/g>\r\n\t<\/g>\r\n\r\n\t<g id=\"star3\" transform=\"matrix( 0.7775726318359375, -0.6287841796875, 0.6287841796875, 0.7775726318359375, 266.1,374.05) \">\r\n\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t<use xlink:href=\"#star_0_Layer0_0_FILL\" \/>\r\n\t\t<\/g>\r\n\t<\/g>\r\n\r\n\t<g id=\"star1\" transform=\"matrix( 0.6024169921875, 0.79815673828125, -0.79815673828125, 0.6024169921875, 296,429.35) \">\r\n\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t<use xlink:href=\"#star_0_Layer0_0_FILL\" \/>\r\n\t\t<\/g>\r\n\t<\/g>\r\n\r\n\t<g id=\"base\" transform=\"matrix( 1, 0, 0, 1, 250,747.2) \">\r\n\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t<use xlink:href=\"#base_0_Layer0_0_FILL\" \/>\r\n\t\t<\/g>\r\n\t<\/g>\r\n\r\n\t<g id=\"handleL\" transform=\"matrix( 1, 0, 0, 1, 147.35,429.3) \">\r\n\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t<use xlink:href=\"#handleL_0_Layer0_0_FILL\" \/>\r\n\t\t<\/g>\r\n\t<\/g>\r\n\r\n\t<g id=\"medalBack\" transform=\"matrix( 1, 0, 0, 1, 307.85,317.15) \">\r\n\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t<use xlink:href=\"#ribbonBack_0_Layer0_0_FILL\" \/>\r\n\t\t<\/g>\r\n\t<\/g>\r\n\r\n\t<g id=\"cup\" transform=\"matrix( 1, 0, 0, 1, 250,578.35) \">\r\n\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t<use xlink:href=\"#cup_0_Layer0_0_FILL\" \/>\r\n\t\t<\/g>\r\n\t<\/g>\r\n\r\n\t<g id=\"handleR\" transform=\"matrix( 1, 0, 0, 1, 348.4,430.85) \">\r\n\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t<use xlink:href=\"#handleR_0_Layer0_0_FILL\" \/>\r\n\t\t<\/g>\r\n\t<\/g>\r\n\r\n\t<g id=\"medal\" transform=\"matrix( 1, 0, 0, 1, 280.15,446.9) \">\r\n\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t<use xlink:href=\"#coin_0_Layer1_0_FILL\" \/>\r\n\t\t<\/g>\r\n\r\n\t\t<g transform=\"matrix( 1, 0, 0, 1, 0,0) \">\r\n\t\t\t<use xlink:href=\"#coin_0_Layer0_0_FILL\" \/>\r\n\t\t<\/g>\r\n\t<\/g>\r\n<\/svg>\r\n<\/pre>\n
3. Create a new CSS file named styles.css<\/code>. Add CSS rules to style the different parts of the trophy, including their size, position, and appearance.<\/p>\n
Add animation effects to make the trophy appear as if it’s rotating or sparkling. You can use CSS keyframes for animations.<\/p>\n
@keyframes confetti9 {\r\n  0% {\r\n    transform: matrix(0.2588195801, -0.9659118652, 0.9659118652, 0.2588195801, 317.85, 429.15);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  21.008403361344538% {\r\n    transform: matrix(0.2588195801, -0.9659118652, 0.9659118652, 0.2588195801, 250, 429.15);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  42.857142857142854% {\r\n    transform: matrix(-0.9999694824, 0, 0, -0.9999694824, 351.4, 136.85);\r\n    opacity: 1;\r\n    animation-timing-function: ease-in;\r\n  }\r\n  61.34453781512605% {\r\n    transform: matrix(0.0000152588, 0.9999237061, -0.9999237061, 0.0000152588, 394.55, 354.55);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n  100% {\r\n    transform: matrix(0.0000152588, 0.9999237061, -0.9999237061, 0.0000152588, 394.55, 354.55);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n}\r\n@keyframes confetti6 {\r\n  0% {\r\n    transform: matrix(0.7070922852, -0.7070922852, 0.7070922852, 0.7070922852, 273.15, 383.75);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  21.008403361344538% {\r\n    transform: matrix(0.7070922852, -0.7070922852, 0.7070922852, 0.7070922852, 249.95, 383.75);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  42.857142857142854% {\r\n    transform: matrix(-0.9658813477, -0.2587890625, 0.2587890625, -0.9658813477, 273.25, 62.2);\r\n    opacity: 1;\r\n    animation-timing-function: ease-in;\r\n  }\r\n  63.02521008403361% {\r\n    transform: matrix(0.2588195801, 0.9658813477, -0.9658813477, 0.2588195801, 322.1, 227.75);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n  100% {\r\n    transform: matrix(0.2588195801, 0.9658813477, -0.9658813477, 0.2588195801, 322.1, 227.75);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n}\r\n@keyframes confetti11 {\r\n  0% {\r\n    transform: matrix(-0.965927124, 0.2587890625, -0.2587890625, -0.965927124, 236, 421.95);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  21.008403361344538% {\r\n    transform: matrix(-0.965927124, 0.2587890625, -0.2587890625, -0.965927124, 250.05, 421.95);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  42.016806722689076% {\r\n    transform: matrix(-0.4999847412, 0.8659667969, -0.8659667969, -0.4999847412, 278.8, 164.8);\r\n    opacity: 1;\r\n    animation-timing-function: ease-in;\r\n  }\r\n  58.82352941176471% {\r\n    transform: matrix(-0.9658508301, 0.2587890625, -0.2587890625, -0.9658508301, 310.45, 303.4);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n  100% {\r\n    transform: matrix(-0.9658508301, 0.2587890625, -0.2587890625, -0.9658508301, 310.45, 303.4);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n}\r\n@keyframes cup {\r\n  0% {\r\n    transform: matrix(1, 0, 0, 1, 250, 578.35);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  10.084033613445378% {\r\n    transform: matrix(1, 0, 0, 1, 250, 609.2);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  13.445378151260504% {\r\n    transform: matrix(1, 0, 0, 1, 250, 609.2);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  18.487394957983195% {\r\n    transform: matrix(1, 0, 0, 1, 250, 563.5);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  28.57142857142857% {\r\n    transform: matrix(1, 0, 0, 1, 250, 495);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  36.134453781512605% {\r\n    transform: matrix(1, 0, 0, 1, 250, 495);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  45.378151260504204% {\r\n    transform: matrix(1, 0, 0, 1, 250, 563.5);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  51.26050420168067% {\r\n    transform: matrix(1, 0, 0, 1, 250, 609.2);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  59.66386554621849% {\r\n    transform: matrix(1, 0, 0, 1, 250, 578.35);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  100% {\r\n    transform: matrix(1, 0, 0, 1, 250, 578.35);\r\n    animation-timing-function: linear;\r\n  }\r\n}\r\n@keyframes shadow {\r\n  0% {\r\n    transform: matrix(1, 0, 0, 1, 250, 742.25);\r\n    opacity: 1;\r\n    animation-timing-function: linear;\r\n  }\r\n  18.487394957983195% {\r\n    transform: matrix(1, 0, 0, 1, 250, 742.25);\r\n    opacity: 1;\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  28.57142857142857% {\r\n    transform: matrix(0.6494445801, 0, 0, 0.6494445801, 250, 742.25);\r\n    opacity: 0.46875;\r\n    animation-timing-function: ease-in;\r\n  }\r\n  36.134453781512605% {\r\n    transform: matrix(0.6494445801, 0, 0, 0.6494445801, 250, 742.25);\r\n    opacity: 0.46875;\r\n    animation-timing-function: ease-in;\r\n  }\r\n  45.378151260504204% {\r\n    transform: matrix(1, 0, 0, 1, 250, 742.25);\r\n    opacity: 1;\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  100% {\r\n    transform: matrix(1, 0, 0, 1, 250, 742.25);\r\n    opacity: 1;\r\n    animation-timing-function: linear;\r\n  }\r\n}\r\n@keyframes confetti2 {\r\n  0% {\r\n    transform: matrix(1, 0, 0, 1, 210.4, 392.1);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  21.84873949579832% {\r\n    transform: matrix(1, 0, 0, 1, 250, 392.1);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  43.69747899159664% {\r\n    transform: matrix(0.2588195801, -0.9659118652, 0.9659118652, 0.2588195801, 190.3, 141.5);\r\n    opacity: 1;\r\n    animation-timing-function: ease-in;\r\n  }\r\n  65.54621848739495% {\r\n    transform: matrix(0.2588195801, -0.9659118652, 0.9659118652, 0.2588195801, 192.5, 291);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n  100% {\r\n    transform: matrix(0.2588195801, -0.9659118652, 0.9659118652, 0.2588195801, 192.5, 291);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n}\r\n@keyframes handleL {\r\n  0% {\r\n    transform: matrix(1, 0, 0, 1, 147.35, 429.3);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  10.084033613445378% {\r\n    transform: matrix(1, 0, 0, 1, 147.35, 460.15);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  13.445378151260504% {\r\n    transform: matrix(1, 0, 0, 1, 147.35, 460.15);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  18.487394957983195% {\r\n    transform: matrix(1, 0, 0, 1, 147.35, 414.45);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  28.57142857142857% {\r\n    transform: matrix(0.7661743164, 0, 0, 1, 158.85, 345.95);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  36.134453781512605% {\r\n    transform: matrix(0.7661743164, 0, 0, 1, 158.85, 345.95);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  45.378151260504204% {\r\n    transform: matrix(1, 0, 0, 1, 147.35, 414.45);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  51.26050420168067% {\r\n    transform: matrix(1, 0, 0, 1, 147.35, 460.15);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  59.66386554621849% {\r\n    transform: matrix(1, 0, 0, 1, 147.35, 429.3);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  100% {\r\n    transform: matrix(1, 0, 0, 1, 147.35, 429.3);\r\n    animation-timing-function: linear;\r\n  }\r\n}\r\n@keyframes confetti7 {\r\n  0% {\r\n    transform: matrix(0.5, -0.8660125732, 0.8660125732, 0.5, 335.9, 408.9);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  22.689075630252102% {\r\n    transform: matrix(0.5, -0.8660125732, 0.8660125732, 0.5, 249.95, 408.9);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  46.21848739495798% {\r\n    transform: matrix(-0.8660125732, -0.5, 0.5, -0.8660125732, 380.55, 80.75);\r\n    opacity: 1;\r\n    animation-timing-function: ease-in;\r\n  }\r\n  67.22689075630252% {\r\n    transform: matrix(-0.2587890625, 0.9658813477, -0.9658813477, -0.2587890625, 442.5, 257.05);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n  100% {\r\n    transform: matrix(-0.2587890625, 0.9658813477, -0.9658813477, -0.2587890625, 442.5, 257.05);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n}\r\n@keyframes star1 {\r\n  0% {\r\n    transform: matrix(0.6024169922, 0.7981567383, -0.7981567383, 0.6024169922, 296, 429.35);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  19.327731092436977% {\r\n    transform: matrix(0.6024169922, 0.7981567383, -0.7981567383, 0.6024169922, 286, 429.35);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  42.857142857142854% {\r\n    transform: matrix(-0.712677002, 0.7014160156, -0.7014160156, -0.712677002, 292.5, 104.15);\r\n    opacity: 1;\r\n    animation-timing-function: ease-in;\r\n  }\r\n  64.70588235294117% {\r\n    transform: matrix(-0.7884521484, -0.6150512695, 0.6150512695, -0.7884521484, 300.3, 344.2);\r\n    opacity: 0;\r\n    animation-timing-function: linear;\r\n  }\r\n  100% {\r\n    transform: matrix(-0.7884521484, -0.6150512695, 0.6150512695, -0.7884521484, 300.3, 344.2);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n}\r\n@keyframes confetti3 {\r\n  0% {\r\n    transform: matrix(0.866027832, 0.4999847412, -0.4999847412, 0.866027832, 192.1, 376.55);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  21.008403361344538% {\r\n    transform: matrix(0.866027832, 0.4999847412, -0.4999847412, 0.866027832, 250, 376.55);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  43.69747899159664% {\r\n    transform: matrix(-0.9658813477, 0.2587890625, -0.2587890625, -0.9658813477, 119.85, 46.45);\r\n    opacity: 1;\r\n    animation-timing-function: ease-in;\r\n  }\r\n  63.86554621848739% {\r\n    transform: matrix(0.2587890625, -0.9658813477, 0.9658813477, 0.2587890625, 64.4, 210.5);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n  100% {\r\n    transform: matrix(0.2587890625, -0.9658813477, 0.9658813477, 0.2587890625, 64.4, 210.5);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n}\r\n@keyframes confetti1 {\r\n  0% {\r\n    transform: matrix(0.2588195801, 0.9659118652, -0.9659118652, 0.2588195801, 179.6, 389.35);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  21.008403361344538% {\r\n    transform: matrix(0.2588195801, 0.9659118652, -0.9659118652, 0.2588195801, 250.05, 389.35);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  42.857142857142854% {\r\n    transform: matrix(-0.2587890625, 0.9659118652, -0.9659118652, -0.2587890625, 159.45, 71.2);\r\n    opacity: 1;\r\n    animation-timing-function: ease-in;\r\n  }\r\n  67.22689075630252% {\r\n    transform: matrix(0.9659118652, 0.2587890625, -0.2587890625, 0.9659118652, 145.7, 200.85);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n  100% {\r\n    transform: matrix(0.9659118652, 0.2587890625, -0.2587890625, 0.9659118652, 145.7, 200.85);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n}\r\n@keyframes confetti8 {\r\n  0% {\r\n    transform: matrix(0.7070922852, -0.7070922852, 0.7070922852, 0.7070922852, 176.15, 423.05);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  21.84873949579832% {\r\n    transform: matrix(0.7070922852, -0.7070922852, 0.7070922852, 0.7070922852, 249.95, 423.05);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  44.537815126050425% {\r\n    transform: matrix(0, -0.9999694824, 0.9999694824, 0, 123.05, 130.6);\r\n    opacity: 1;\r\n    animation-timing-function: ease-in;\r\n  }\r\n  63.02521008403361% {\r\n    transform: matrix(0.9658660889, 0.2587738037, -0.2587738037, 0.9658660889, 96.7, 292.15);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n  100% {\r\n    transform: matrix(0.9658660889, 0.2587738037, -0.2587738037, 0.9658660889, 96.7, 292.15);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n}\r\n@keyframes star2 {\r\n  0% {\r\n    transform: matrix(0.5, -0.8660125732, 0.8660125732, 0.5, 210.4, 404.9);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  23.52941176470588% {\r\n    transform: matrix(0.5, -0.8660125732, 0.8660125732, 0.5, 210.4, 392.05);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  44.537815126050425% {\r\n    transform: matrix(-0.4999389648, 0.8659362793, -0.8659362793, -0.4999389648, 161.8, 152.8);\r\n    opacity: 1;\r\n    animation-timing-function: ease-in;\r\n  }\r\n  61.34453781512605% {\r\n    transform: matrix(-0.4999389648, -0.8659667969, 0.8659667969, -0.4999389648, 135.2, 395.15);\r\n    opacity: 0;\r\n    animation-timing-function: linear;\r\n  }\r\n  100% {\r\n    transform: matrix(-0.4999389648, -0.8659667969, 0.8659667969, -0.4999389648, 135.2, 395.15);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n}\r\n@keyframes handleR {\r\n  0% {\r\n    transform: matrix(1, 0, 0, 1, 348.4, 430.85);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  10.084033613445378% {\r\n    transform: matrix(1, 0, 0, 1, 348.4, 461.7);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  13.445378151260504% {\r\n    transform: matrix(1, 0, 0, 1, 348.4, 461.7);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  18.487394957983195% {\r\n    transform: matrix(1, 0, 0, 1, 348.4, 416);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  28.57142857142857% {\r\n    transform: matrix(0.8685302734, 0, 0, 1, 336.9, 347.5);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  36.134453781512605% {\r\n    transform: matrix(0.8685302734, 0, 0, 1, 336.9, 347.5);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  45.378151260504204% {\r\n    transform: matrix(1, 0, 0, 1, 348.4, 416);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  51.26050420168067% {\r\n    transform: matrix(1, 0, 0, 1, 348.4, 461.7);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  59.66386554621849% {\r\n    transform: matrix(1, 0, 0, 1, 348.4, 430.85);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  100% {\r\n    transform: matrix(1, 0, 0, 1, 348.4, 430.85);\r\n    animation-timing-function: linear;\r\n  }\r\n}\r\n@keyframes confetti10 {\r\n  0% {\r\n    transform: matrix(0, 1, -1, 0, 248.45, 409.15);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  27.73109243697479% {\r\n    transform: matrix(0, 1, -1, 0, 250.05, 409.15);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  48.739495798319325% {\r\n    transform: matrix(1, 0, 0, 1, 248.45, 116.65);\r\n    opacity: 1;\r\n    animation-timing-function: ease-in;\r\n  }\r\n  63.86554621848739% {\r\n    transform: matrix(0.2588195801, -0.9659118652, 0.9659118652, 0.2588195801, 248.45, 238.05);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n  100% {\r\n    transform: matrix(0.2588195801, -0.9659118652, 0.9659118652, 0.2588195801, 248.45, 238.05);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n}\r\n@keyframes star3 {\r\n  0% {\r\n    transform: matrix(0.7775726318, -0.6287841797, 0.6287841797, 0.7775726318, 266.1, 374.05);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  30.252100840336134% {\r\n    transform: matrix(0.7775726318, -0.6287841797, 0.6287841797, 0.7775726318, 266.1, 374.05);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  49.57983193277311% {\r\n    transform: matrix(0.7248535156, 0.6888275146, -0.6888275146, 0.7248535156, 361.8, 151.7);\r\n    opacity: 1;\r\n    animation-timing-function: ease-in;\r\n  }\r\n  67.22689075630252% {\r\n    transform: matrix(-0.5883178711, 0.80859375, -0.80859375, -0.5883178711, 413.4, 412.4);\r\n    opacity: 0;\r\n    animation-timing-function: linear;\r\n  }\r\n  100% {\r\n    transform: matrix(-0.5883178711, 0.80859375, -0.80859375, -0.5883178711, 413.4, 412.4);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n}\r\n@keyframes confetti4 {\r\n  0% {\r\n    transform: matrix(0.2588195801, 0.9659118652, -0.9659118652, 0.2588195801, 216.25, 373.3);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  28.57142857142857% {\r\n    transform: matrix(0.2588195801, 0.9659118652, -0.9659118652, 0.2588195801, 250.05, 373.3);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  49.57983193277311% {\r\n    transform: matrix(-0.9658660889, 0.2587890625, -0.2587890625, -0.9658660889, 216.5, 54.4);\r\n    opacity: 1;\r\n    animation-timing-function: ease-in;\r\n  }\r\n  70.58823529411765% {\r\n    transform: matrix(0.4999389648, -0.8659667969, 0.8659667969, 0.4999389648, 202.55, 204.95);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n  100% {\r\n    transform: matrix(0.4999389648, -0.8659667969, 0.8659667969, 0.4999389648, 202.55, 204.95);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n}\r\n@keyframes medal {\r\n  0% {\r\n    transform: matrix(1, 0, 0, 1, 280.15, 446.9);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  10.084033613445378% {\r\n    transform: matrix(1, 0, 0, 1, 280.15, 477.75);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  13.445378151260504% {\r\n    transform: matrix(1, 0, 0, 1, 280.15, 477.75);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  18.487394957983195% {\r\n    transform: matrix(1, 0, 0, 1, 280.15, 432.05);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  28.57142857142857% {\r\n    transform: matrix(1, 0, 0, 1, 249.15, 349.75);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  36.134453781512605% {\r\n    transform: matrix(1, 0, 0, 1, 249.15, 349.75);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  45.378151260504204% {\r\n    transform: matrix(1, 0, 0, 1, 280.15, 432.05);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  51.26050420168067% {\r\n    transform: matrix(1, 0, 0, 1, 280.15, 477.75);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  59.66386554621849% {\r\n    transform: matrix(1, 0, 0, 1, 280.15, 446.9);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  100% {\r\n    transform: matrix(1, 0, 0, 1, 280.15, 446.9);\r\n    animation-timing-function: linear;\r\n  }\r\n}\r\n@keyframes base {\r\n  0% {\r\n    transform: matrix(1, 0, 0, 1, 250, 747.2);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  10.084033613445378% {\r\n    transform: matrix(1, 0, 0, 0.8267211914, 250, 747.2);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  13.445378151260504% {\r\n    transform: matrix(1, 0, 0, 0.8267211914, 250, 747.2);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  18.487394957983195% {\r\n    transform: matrix(1, 0, 0, 1.092956543, 250, 747.2);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  28.57142857142857% {\r\n    transform: matrix(0.8340454102, 0, 0, 1.092956543, 250, 678.7);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  36.134453781512605% {\r\n    transform: matrix(0.8340454102, 0, 0, 1.092956543, 250, 678.7);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  45.378151260504204% {\r\n    transform: matrix(1, 0, 0, 1.092956543, 250, 747.2);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  51.26050420168067% {\r\n    transform: matrix(1, 0, 0, 0.8267211914, 250, 747.2);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  59.66386554621849% {\r\n    transform: matrix(1, 0, 0, 1, 250, 747.2);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  100% {\r\n    transform: matrix(1, 0, 0, 1, 250, 747.2);\r\n    animation-timing-function: linear;\r\n  }\r\n}\r\n@keyframes confetti5 {\r\n  0% {\r\n    transform: matrix(0.866027832, -0.4999847412, 0.4999847412, 0.866027832, 207.45, 416.7);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  22.689075630252102% {\r\n    transform: matrix(0.866027832, -0.4999847412, 0.4999847412, 0.866027832, 250, 416.7);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  44.537815126050425% {\r\n    transform: matrix(0.7070770264, 0.7070922852, -0.7070922852, 0.7070770264, 348.55, 49.15);\r\n    opacity: 1;\r\n    animation-timing-function: ease-in;\r\n  }\r\n  65.54621848739495% {\r\n    transform: matrix(-0.9658508301, 0.2588195801, -0.2588195801, -0.9658508301, 417.15, 198.9);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n  100% {\r\n    transform: matrix(-0.9658508301, 0.2588195801, -0.2588195801, -0.9658508301, 417.15, 198.9);\r\n    opacity: 0;\r\n    animation-timing-function: ease-out;\r\n  }\r\n}\r\n@keyframes medalBack {\r\n  0% {\r\n    transform: matrix(1, 0, 0, 1, 307.85, 317.15);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  10.084033613445378% {\r\n    transform: matrix(1, 0, 0, 1, 307.85, 348);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  13.445378151260504% {\r\n    transform: matrix(1, 0, 0, 1, 307.85, 348);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  18.487394957983195% {\r\n    transform: matrix(1, 0, 0, 1, 307.85, 302.3);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  28.57142857142857% {\r\n    transform: matrix(1, 0, 0, 1, 276.85, 220);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  36.134453781512605% {\r\n    transform: matrix(1, 0, 0, 1, 276.85, 220);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  45.378151260504204% {\r\n    transform: matrix(1, 0, 0, 1, 307.85, 302.3);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  51.26050420168067% {\r\n    transform: matrix(1, 0, 0, 1, 307.85, 348);\r\n    animation-timing-function: ease-in;\r\n  }\r\n  59.66386554621849% {\r\n    transform: matrix(1, 0, 0, 1, 307.85, 317.15);\r\n    animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);\r\n  }\r\n  100% {\r\n    transform: matrix(1, 0, 0, 1, 307.85, 317.15);\r\n    animation-timing-function: linear;\r\n  }\r\n}\r\n#confetti9 {\r\n  animation: confetti9 1.9833333333s infinite;\r\n  animation-delay: 0s;\r\n}\r\n\r\n#confetti6 {\r\n  animation: confetti6 1.9833333333s infinite;\r\n  animation-delay: 0s;\r\n}\r\n\r\n#confetti11 {\r\n  animation: confetti11 1.9833333333s infinite;\r\n  animation-delay: 0s;\r\n}\r\n\r\n#confetti2 {\r\n  animation: confetti2 1.9833333333s infinite;\r\n  animation-delay: 0s;\r\n}\r\n\r\n#confetti7 {\r\n  animation: confetti7 1.9833333333s infinite;\r\n  animation-delay: 0s;\r\n}\r\n\r\n#star1 {\r\n  animation: star1 1.9833333333s infinite;\r\n  animation-delay: 0s;\r\n}\r\n\r\n#confetti3 {\r\n  animation: confetti3 1.9833333333s infinite;\r\n  animation-delay: 0s;\r\n}\r\n\r\n#confetti1 {\r\n  animation: confetti1 1.9833333333s infinite;\r\n  animation-delay: 0s;\r\n}\r\n\r\n#confetti8 {\r\n  animation: confetti8 1.9833333333s infinite;\r\n  animation-delay: 0s;\r\n}\r\n\r\n#star2 {\r\n  animation: star2 1.9833333333s infinite;\r\n  animation-delay: 0s;\r\n}\r\n\r\n#confetti10 {\r\n  animation: confetti10 1.9833333333s infinite;\r\n  animation-delay: 0s;\r\n}\r\n\r\n#star3 {\r\n  animation: star3 1.9833333333s infinite;\r\n  animation-delay: 0s;\r\n}\r\n\r\n#confetti4 {\r\n  animation: confetti4 1.9833333333s infinite;\r\n  animation-delay: 0s;\r\n}\r\n\r\n#confetti5 {\r\n  animation: confetti5 1.9833333333s infinite;\r\n  animation-delay: 0s;\r\n}\r\n\r\n#shadow {\r\n  animation: shadow 1.9833333333s infinite;\r\n  animation-delay: 0s;\r\n}\r\n\r\n#cup {\r\n  animation: cup 1.9833333333s infinite;\r\n  animation-delay: 0s;\r\n}\r\n\r\n#handleL {\r\n  animation: handleL 1.9833333333s infinite;\r\n  animation-delay: 0s;\r\n}\r\n\r\n#handleR {\r\n  animation: handleR 1.9833333333s infinite;\r\n  animation-delay: 0s;\r\n}\r\n\r\n#medal {\r\n  animation: medal 1.9833333333s infinite;\r\n  animation-delay: 0s;\r\n}\r\n\r\n#base {\r\n  animation: base 1.9833333333s infinite;\r\n  animation-delay: 0s;\r\n}\r\n\r\n#medalBack {\r\n  animation: medalBack 1.9833333333s infinite;\r\n  animation-delay: 0s;\r\n}\r\n\r\nbody {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 100vh;\r\n  background: #eed !important;\r\n}\r\n\r\nsvg {\r\n  width: 250px;\r\n  height: auto;\r\n}<\/pre>\n
That’s all! hopefully, you have successfully created Trophy Animation on your website. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This code snippet helps you to create a trophy animation using HTML and CSS. It generates confetti and star animations….<\/p>\n","protected":false},"author":1,"featured_media":11564,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[209],"tags":[],"class_list":["post-11541","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation-effects"],"acf":[],"yoast_head":"\nTrophy Animation Using HTML & CSS — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Trophy Animation Using HTML & CSS. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Trophy Animation Using HTML & CSS — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Trophy Animation Using HTML & CSS. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-23T10:45:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Trophy-Animation-Using-HTML-CSS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Trophy Animation Using HTML & CSS\",\"datePublished\":\"2024-03-23T10:45:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/\"},\"wordCount\":208,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Trophy-Animation-Using-HTML-CSS.png\",\"articleSection\":[\"Animation & Effects\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/\",\"url\":\"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/\",\"name\":\"Trophy Animation Using HTML & CSS — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Trophy-Animation-Using-HTML-CSS.png\",\"datePublished\":\"2024-03-23T10:45:05+00:00\",\"description\":\"Here is a free code snippet to create a Trophy Animation Using HTML & CSS. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Trophy-Animation-Using-HTML-CSS.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Trophy-Animation-Using-HTML-CSS.png\",\"width\":1280,\"height\":960,\"caption\":\"Trophy Animation Using HTML & CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animation & Effects\",\"item\":\"https:\/\/codehim.com\/category\/animation-effects\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Trophy Animation Using HTML & CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Trophy Animation Using HTML & CSS — CodeHim","description":"Here is a free code snippet to create a Trophy Animation Using HTML & CSS. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/","og_locale":"en_US","og_type":"article","og_title":"Trophy Animation Using HTML & CSS — CodeHim","og_description":"Here is a free code snippet to create a Trophy Animation Using HTML & CSS. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-03-23T10:45:05+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Trophy-Animation-Using-HTML-CSS.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Trophy Animation Using HTML & CSS","datePublished":"2024-03-23T10:45:05+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/"},"wordCount":208,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Trophy-Animation-Using-HTML-CSS.png","articleSection":["Animation & Effects"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/","url":"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/","name":"Trophy Animation Using HTML & CSS — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Trophy-Animation-Using-HTML-CSS.png","datePublished":"2024-03-23T10:45:05+00:00","description":"Here is a free code snippet to create a Trophy Animation Using HTML & CSS. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Trophy-Animation-Using-HTML-CSS.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Trophy-Animation-Using-HTML-CSS.png","width":1280,"height":960,"caption":"Trophy Animation Using HTML & CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/animation-effects\/trophy-animation-using-html-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Animation & Effects","item":"https:\/\/codehim.com\/category\/animation-effects\/"},{"@type":"ListItem","position":3,"name":"Trophy Animation Using HTML & CSS"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":1700,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=11541"}],"version-history":[{"count":5,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11541\/revisions"}],"predecessor-version":[{"id":11583,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11541\/revisions\/11583"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/11564"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=11541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=11541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=11541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}