[{"id":44,"created_at":"2023-09-15T18:57:49.659208+00:00","html":"

\r\n

","css":"body {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 89dvh;\r\n}\r\n\r\n.typewriter {\r\n --blue: #5C86FF;\r\n --blue-dark: #275EFE;\r\n --key: #fff;\r\n --paper: #EEF0FD;\r\n --text: #D3D4EC;\r\n --tool: #FBC56C;\r\n --duration: 3s;\r\n position: relative;\r\n animation: bounce var(--duration) linear infinite;\r\n}\r\n\r\n.typewriter .slide {\r\n width: 92px;\r\n height: 20px;\r\n border-radius: 3px;\r\n margin-left: 14px;\r\n transform: translateX(14px);\r\n background: linear-gradient(var(--blue), var(--blue-dark));\r\n animation: slide var(--duration) ease infinite;\r\n}\r\n\r\n.typewriter .slide:before,\r\n.typewriter .slide:after,\r\n.typewriter .slide i:before {\r\n content: '';\r\n position: absolute;\r\n background: var(--tool);\r\n}\r\n\r\n.typewriter .slide:before {\r\n width: 2px;\r\n height: 8px;\r\n top: 6px;\r\n left: 100%;\r\n}\r\n\r\n.typewriter .slide:after {\r\n left: 94px;\r\n top: 3px;\r\n height: 14px;\r\n width: 6px;\r\n border-radius: 3px;\r\n}\r\n\r\n.typewriter .slide i {\r\n display: block;\r\n position: absolute;\r\n right: 100%;\r\n width: 6px;\r\n height: 4px;\r\n top: 4px;\r\n background: var(--tool);\r\n}\r\n\r\n.typewriter .slide i:before {\r\n right: 100%;\r\n top: -2px;\r\n width: 4px;\r\n border-radius: 2px;\r\n height: 14px;\r\n}\r\n\r\n.typewriter .paper {\r\n position: absolute;\r\n left: 24px;\r\n top: -26px;\r\n width: 40px;\r\n height: 46px;\r\n border-radius: 5px;\r\n background: var(--paper);\r\n transform: translateY(46px);\r\n animation: paper var(--duration) linear infinite;\r\n}\r\n\r\n.typewriter .paper:before {\r\n content: '';\r\n position: absolute;\r\n left: 6px;\r\n right: 6px;\r\n top: 7px;\r\n border-radius: 2px;\r\n height: 4px;\r\n transform: scaleY(0.8);\r\n background: var(--text);\r\n box-shadow: 0 12px 0 var(--text), 0 24px 0 var(--text), 0 36px 0 var(--text);\r\n}\r\n\r\n.typewriter .keyboard {\r\n width: 120px;\r\n height: 56px;\r\n margin-top: -10px;\r\n z-index: 1;\r\n position: relative;\r\n}\r\n\r\n.typewriter .keyboard:before,\r\n.typewriter .keyboard:after {\r\n content: '';\r\n position: absolute;\r\n}\r\n\r\n.typewriter .keyboard:before {\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n border-radius: 7px;\r\n background: linear-gradient(135deg, var(--blue), var(--blue-dark));\r\n transform: perspective(10px) rotateX(2deg);\r\n transform-origin: 50% 100%;\r\n}\r\n\r\n.typewriter .keyboard:after {\r\n left: 2px;\r\n top: 25px;\r\n width: 11px;\r\n height: 4px;\r\n border-radius: 2px;\r\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 0 0 var(--key), 37px 0 0 var(--key), 52px 0 0 var(--key), 60px 0 0 var(--key), 68px 0 0 var(--key), 83px 0 0 var(--key);\r\n animation: keyboard var(--duration) linear infinite;\r\n}\r\n\r\n@keyframes bounce {\r\n\r\n 85%,\r\n 92%,\r\n 100% {\r\n transform: translateY(0);\r\n }\r\n\r\n 89% {\r\n transform: translateY(-4px);\r\n }\r\n\r\n 95% {\r\n transform: translateY(2px);\r\n }\r\n}\r\n\r\n@keyframes slide {\r\n 5% {\r\n transform: translateX(14px);\r\n }\r\n\r\n 15%,\r\n 30% {\r\n transform: translateX(6px);\r\n }\r\n\r\n 40%,\r\n 55% {\r\n transform: translateX(0);\r\n }\r\n\r\n 65%,\r\n 70% {\r\n transform: translateX(-4px);\r\n }\r\n\r\n 80%,\r\n 89% {\r\n transform: translateX(-12px);\r\n }\r\n\r\n 100% {\r\n transform: translateX(14px);\r\n }\r\n}\r\n\r\n@keyframes paper {\r\n 5% {\r\n transform: translateY(46px);\r\n }\r\n\r\n 20%,\r\n 30% {\r\n transform: translateY(34px);\r\n }\r\n\r\n 40%,\r\n 55% {\r\n transform: translateY(22px);\r\n }\r\n\r\n 65%,\r\n 70% {\r\n transform: translateY(10px);\r\n }\r\n\r\n 80%,\r\n 85% {\r\n transform: translateY(0);\r\n }\r\n\r\n 92%,\r\n 100% {\r\n transform: translateY(46px);\r\n }\r\n}\r\n\r\n@keyframes keyboard {\r\n\r\n 5%,\r\n 12%,\r\n 21%,\r\n 30%,\r\n 39%,\r\n 48%,\r\n 57%,\r\n 66%,\r\n 75%,\r\n 84% {\r\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 0 0 var(--key), 37px 0 0 var(--key), 52px 0 0 var(--key), 60px 0 0 var(--key), 68px 0 0 var(--key), 83px 0 0 var(--key);\r\n }\r\n\r\n 9% {\r\n box-shadow: 15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 0 0 var(--key), 37px 0 0 var(--key), 52px 0 0 var(--key), 60px 0 0 var(--key), 68px 0 0 var(--key), 83px 0 0 var(--key);\r\n }\r\n\r\n 18% {\r\n box-shadow: 15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 2px 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 0 0 var(--key), 37px 0 0 var(--key), 52px 0 0 var(--key), 60px 0 0 var(--key), 68px 0 0 var(--key), 83px 0 0 var(--key);\r\n }\r\n\r\n 27% {\r\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 12px 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 0 0 var(--key), 37px 0 0 var(--key), 52px 0 0 var(--key), 60px 0 0 var(--key), 68px 0 0 var(--key), 83px 0 0 var(--key);\r\n }\r\n\r\n 36% {\r\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 12px 0 var(--key), 22px 0 0 var(--key), 37px 0 0 var(--key), 52px 0 0 var(--key), 60px 0 0 var(--key), 68px 0 0 var(--key), 83px 0 0 var(--key);\r\n }\r\n\r\n 45% {\r\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 2px 0 var(--key), 37px 0 0 var(--key), 52px 0 0 var(--key), 60px 0 0 var(--key), 68px 0 0 var(--key), 83px 0 0 var(--key);\r\n }\r\n\r\n 54% {\r\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 0 0 var(--key), 37px 2px 0 var(--key), 52px 0 0 var(--key), 60px 0 0 var(--key), 68px 0 0 var(--key), 83px 0 0 var(--key);\r\n }\r\n\r\n 63% {\r\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 0 0 var(--key), 37px 0 0 var(--key), 52px 0 0 var(--key), 60px 0 0 var(--key), 68px 0 0 var(--key), 83px 12px 0 var(--key);\r\n }\r\n\r\n 72% {\r\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 0 0 var(--key), 37px 0 0 var(--key), 52px 0 0 var(--key), 60px 0 0 var(--key), 68px 2px 0 var(--key), 83px 0 0 var(--key);\r\n }\r\n\r\n 81% {\r\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 0 0 var(--key), 37px 0 0 var(--key), 52px 0 0 var(--key), 60px 0 0 var(--key), 68px 0 0 var(--key), 83px 12px 0 var(--key);\r\n }\r\n}","js":"// code here","user_id":"1c3624cd-ae3b-4b60-946f-65ea8f296ff7","project_key":"xbihCx","description":"TyperWriter Animation with CSS","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":true,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"framermotion":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "cssProcessor": false},"tags":[],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":140}],"profiles":{"username":"devcanvas"}}]