[{"id":74,"created_at":"2023-09-26T08:11:16.847417+00:00","html":"

\r\n
Block
\r\n
Revealing Effect
\r\n

\r\n\r\n

\r\n \r\n Source\r\n

","css":"/* reset */\r\n*,\r\n*::before,\r\n*::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n:root {\r\n --delay: 2s;\r\n /* Delay between animation cycles */\r\n}\r\n\r\nbody {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-around;\r\n align-items: center;\r\n\r\n min-height: 100vh;\r\n padding: 20px;\r\n\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n\r\n/* other */\r\n.info {\r\n margin: 20px 0;\r\n text-align: center;\r\n}\r\n\r\np {\r\n color: #2e2e2e;\r\n margin-bottom: 20px;\r\n}\r\n\r\n\r\n/* block-$ */\r\n.block-effect {\r\n font-size: calc(8px + 6vw);\r\n}\r\n\r\n.block-reveal {\r\n --t: calc(var(--td) + var(--d));\r\n\r\n color: transparent;\r\n padding: 4px;\r\n\r\n position: relative;\r\n overflow: hidden;\r\n\r\n animation: revealBlock 0s var(--t) forwards;\r\n}\r\n\r\n.block-reveal::after {\r\n content: '';\r\n\r\n width: 0%;\r\n height: 100%;\r\n padding-bottom: 4px;\r\n\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n\r\n background: var(--bc);\r\n animation: revealingIn var(--td) var(--d) forwards, revealingOut var(--td) var(--t) forwards;\r\n}\r\n\r\n\r\n/* animations */\r\n@keyframes revealBlock {\r\n 100% {\r\n color: #0f0f0f;\r\n }\r\n}\r\n\r\n@keyframes revealingIn {\r\n\r\n 0% {\r\n width: 0;\r\n }\r\n\r\n 100% {\r\n width: 100%;\r\n }\r\n}\r\n\r\n@keyframes revealingOut {\r\n\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n\r\n 100% {\r\n transform: translateX(100%);\r\n }\r\n\r\n}\r\n\r\na {\r\n text-decoration: none;\r\n}","js":"// code here","user_id":"1c3624cd-ae3b-4b60-946f-65ea8f296ff7","project_key":"KgjDdM","description":"Block Reveal Effect 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":323}],"profiles":{"username":"devcanvas"}}]

\r\n Block\r\n Revealing Effect\r\n

\r\n
Block
\r\n
Revealing Effect
\r\n