Files
LandPPT/template_examples/终端风.json

16 lines
6.8 KiB
JSON
Raw Permalink Normal View History

2025-11-07 09:05:50 +08:00
{
"template_name": "终端风",
"description": "终端风",
"html_template": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>{{ page_title }}</title>\n <style>\n :root {\n --terminal-bg: #0a100c; \n --terminal-text: #3ddc84; \n --terminal-text-darker: #2a9d62; \n --terminal-glow: rgba(61, 220, 132, 0.25); \n \n \n --glitch-color-1: #c7347e; \n --glitch-color-2: #3e8ad6; \n }\n\n @keyframes scanline {\n 0% { background-position: 0 0; }\n 100% { background-position: 0 100%; }\n }\n\n @keyframes flicker {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.98; } \n }\n\n html {\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #000;\n }\n\n body {\n width: 1280px;\n height: 720px;\n margin: 0;\n padding: 0;\n position: relative;\n overflow: hidden;\n background: var(--terminal-bg);\n font-family: 'Fira Code', 'Operator Mono', 'Courier New', Courier, monospace;\n flex-shrink: 0; \n }\n \n \n .slide-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n color: var(--terminal-text);\n position: relative;\n border: 2px solid var(--terminal-text-darker); \n border-radius: 4px; \n box-shadow: 0 0 15px var(--terminal-glow), inset 0 0 80px rgba(0,0,0,0.8);\n animation: flicker 0.2s infinite;\n }\n \n .slide-container::before {\n content: \" \";\n display: block;\n position: absolute;\n top: 0; left: 0; bottom: 0; right: 0;\n background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.2) 50%);\n z-index: 2;\n background-size: 100% 3px;\n pointer-events: none;\n animation: scanline 20s linear infinite;\n }\n \n .slide-header {\n padding: 40px 60px 20px 60px;\n border-bottom: 1px solid var(--terminal-text-darker);\n text-shadow: 0 0 4px var(--terminal-glow);\n }\n \n \n .slide-title {\n font-size: clamp(2rem, 4vw, 3.5rem);\n font-weight: 700;\n margin: 0;\n position: relative;\n text-transform: uppercase;\n }\n\n .glitch-effect {\n position: relative;\n }\n .glitch-effect::before,\n .glitch-effect::after {\n content: attr(data-text);\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100%;\n background: var(--terminal-bg);\n overflow: hidden;\n }\n .glitch-effect::before {\n left: 2px;\n text-shadow: -2px 0 var(--glitch-color-1);\n animation: glitch-anim-1 3s infinite linear reverse; \n }\n .glitch-effect::after {\n left: -2px;\n text-shadow: -2px 0 var(--glitch-color-2);\n animation: glitch-anim-2 2.5s infinite linear reverse; \n }\n @keyframes glitch-anim-1 { 0%, 100% { clip-path: inset(45% 0 56% 0); } 25% { clip-path: inset(0 0 100% 0); } 50% { clip-path: inset(80% 0 2% 0); } 75% { clip-path: inset(40% 0 45% 0); } }\n @keyframes glitch-anim-2 { 0%, 100% { clip-path: inset(65% 0 30% 0); } 25% { clip-path: inset(20% 0 75% 0); } 50% { clip-path: inset(90% 0 1% 0); } 75% { clip-path: inset(10% 0 88% 0); } }\n \n .cursor {\n display: inline-block;\n width: 1rem;\n height: 1.8rem;\n background: var(--terminal-text);\n animation: blink 1.2s steps(1) infinite;\n
"tags": [
"终端",
"编程",
"游戏"
],
"is_default": false,
"export_info": {
"exported_at": "2025-06-28T10:12:44.559Z",
"original_id": 2,
"original_created_at": 1749556645.1032526
}
}