CSS on 卓琪的开发笔记 https://zhuoqidev.com/tags/css/ Recent content in CSS on 卓琪的开发笔记 Hugo -- gohugo.io zh-CN © 2026 Liu ZhuoQi Mon, 04 May 2026 00:00:00 +0000 Embedding CSS Animation Demos in Hugo Articles https://zhuoqidev.com/en/posts/css-animation-demo/ Mon, 04 May 2026 00:00:00 +0000 https://zhuoqidev.com/en/posts/css-animation-demo/ <p>Hugo shortcodes make it easy to embed live code demos. Here are three ways:</p> <h2 class="relative group">1. Inline CSS Demo (No External Service) <div id="1-inline-css-demo-no-external-service" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none"> <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#1-inline-css-demo-no-external-service" aria-label="锚点">#</a> </span> </h2> <p>A spinning loader animation, right in the article:</p> <div class="inline-demo" style="margin: 1.5rem 0;"> <iframe id="demo-8e7b60567f581c34a5d9e12e05cdeb9d-0" style="width:100%; height:200px; border:1px solid #dedad4; border-radius:6px; background:#faf8f5;" scrolling="no" sandbox="allow-scripts allow-same-origin"> </iframe> <p style="font-size:0.8rem; color:#777; text-align:center; margin-top:0.5rem;">Pure CSS Spinner</p> </div> <template id="demo-8e7b60567f581c34a5d9e12e05cdeb9d-0-src"> <style> .loader { width: 48px; height: 48px; border: 4px solid #e8e4de; border-top-color: #c44020; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } </style> <div class="loader"></div> </template> <script> (function() { var src = document.getElementById("demo-8e7b60567f581c34a5d9e12e05cdeb9d-0-src").innerHTML; var iframe = document.getElementById("demo-8e7b60567f581c34a5d9e12e05cdeb9d-0"); var doc = iframe.contentDocument || iframe.contentWindow.document; doc.open(); doc.write( '<!DOCTYPE html><html><head><meta charset="utf-8">' + '<style>*{box-sizing:border-box}body{margin:0;display:flex;align-items:center;' + 'justify-content:center;min-height:200px;background:#faf8f5;' + 'font-family:system-ui,sans-serif}</style></head><body>' + src + '</body></html>' ); doc.close(); })(); </script> <p>A gradient text animation:</p> 在 Hugo 文章里内嵌 CSS 动画 Demo https://zhuoqidev.com/posts/css-animation-demo/ Mon, 04 May 2026 00:00:00 +0000 https://zhuoqidev.com/posts/css-animation-demo/ <p>Hugo 用 shortcode 可以很优雅地内嵌代码演示。这里展示三种方式：</p> <h2 class="relative group">1. 内联 CSS demo（无需外部服务） <div id="1-内联-css-demo无需外部服务" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none"> <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#1-%e5%86%85%e8%81%94-css-demo%e6%97%a0%e9%9c%80%e5%a4%96%e9%83%a8%e6%9c%8d%e5%8a%a1" aria-label="锚点">#</a> </span> </h2> <p>直接在文章里跑一个旋转加载动画：</p> <div class="inline-demo" style="margin: 1.5rem 0;"> <iframe id="demo-c9e1e4cadf51119cb40d357b2fe4d93d-0" style="width:100%; height:200px; border:1px solid #dedad4; border-radius:6px; background:#faf8f5;" scrolling="no" sandbox="allow-scripts allow-same-origin"> </iframe> <p style="font-size:0.8rem; color:#777; text-align:center; margin-top:0.5rem;">纯 CSS 旋转加载器</p> </div> <template id="demo-c9e1e4cadf51119cb40d357b2fe4d93d-0-src"> <style> .loader { width: 48px; height: 48px; border: 4px solid #e8e4de; border-top-color: #c44020; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } </style> <div class="loader"></div> </template> <script> (function() { var src = document.getElementById("demo-c9e1e4cadf51119cb40d357b2fe4d93d-0-src").innerHTML; var iframe = document.getElementById("demo-c9e1e4cadf51119cb40d357b2fe4d93d-0"); var doc = iframe.contentDocument || iframe.contentWindow.document; doc.open(); doc.write( '<!DOCTYPE html><html><head><meta charset="utf-8">' + '<style>*{box-sizing:border-box}body{margin:0;display:flex;align-items:center;' + 'justify-content:center;min-height:200px;background:#faf8f5;' + 'font-family:system-ui,sans-serif}</style></head><body>' + src + '</body></html>' ); doc.close(); })(); </script> <p>一个渐变色文字动画：</p>