[{"id":101,"created_at":"2023-12-03T11:52:29.844003+00:00","html":"

\r\n A\r\n M\r\n A\r\n Z\r\n I\r\n N\r\n G\r\n

\r\n\r\n

\r\n

From @Ritika Agrawal

\r\n

","css":"body {\r\n background-color: #add8e6;\r\n display: grid;\r\n place-content: center;\r\n}\r\n\r\n.letter {\r\n position: relative;\r\n}\r\n\r\n.letter::before {\r\n content: \"\";\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n top: 0;\r\n background-color: #add8e6;\r\n animation: animate 500ms linear 1;\r\n animation-fill-mode: forwards;\r\n}\r\n\r\n.letter:nth-child(1)::before {\r\n animation-delay: 0ms;\r\n}\r\n\r\n.letter:nth-child(2)::before {\r\n animation-delay: 500ms;\r\n}\r\n\r\n.letter:nth-child(3)::before {\r\n animation-delay: 1s;\r\n}\r\n\r\n.letter:nth-child(4)::before {\r\n animation-delay: 1.5s;\r\n}\r\n\r\n.letter:nth-child(5)::before {\r\n animation-delay: 2s;\r\n}\r\n\r\n.letter:nth-child(6)::before {\r\n animation-delay: 2.5s;\r\n}\r\n\r\n.letter:nth-child(7)::before {\r\n animation-delay: 3s;\r\n\r\n}\r\n\r\n\r\n/* Confetti animation */\r\n@keyframes confetti {\r\n 0% {\r\n transform: translateY(0) rotate(0);\r\n }\r\n\r\n 100% {\r\n transform: translateY(-800px) rotate(720deg);\r\n }\r\n}\r\n\r\n@keyframes animate {\r\n 100% {\r\n top: -100%\r\n }\r\n}\r\n\r\n.container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.icon {\r\n width: 2.5em;\r\n height: 2.5em;\r\n font-size: 2em;\r\n display: flex;\r\n text-decoration: none;\r\n color: #000;\r\n outline: 2px solid #000;\r\n outline-offset: -8px;\r\n border-radius: 50%;\r\n}\r\n\r\n.icon i {\r\n margin: auto;\r\n}\r\n\r\n.icon:hover {\r\n outline-width: 6px;\r\n outline-color: #add8e6;\r\n color: #fff;\r\n\r\n}\r\n\r\n.icon:hover:has(.fa-x-twitter) {\r\n background-color: #000;\r\n}\r\n\r\n.icon:hover:has(.fa-instagram) {\r\n background-image: radial-gradient(circle at 30% 107%,\r\n #fdf497 0%,\r\n #fdf497 5%,\r\n #fd5949 45%,\r\n #d6249f 69%,\r\n #285aeb);\r\n}\r\n\r\n#credits {\r\n text-align: center;\r\n}","js":"//","user_id":"1c3624cd-ae3b-4b60-946f-65ea8f296ff7","project_key":"9y3YiY","description":"Animation 101","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":true,"materialicons":false,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"motionone":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "cssProcessor": false},"tags":[],"hide_js":true,"hide_css":false,"messages":[],"view":[{"views":638}],"profiles":{"username":"devcanvas"}}]