{"html":"

\n \n\n

\n\n

ONE-STEP

\n\n

\n \n

\n\n

\n","css":".container {\n --plastic-beige: #f4f1ea;\n --plastic-shadow: #dcd8cf;\n --lens-black: #111;\n --stripe-red: #e73639;\n --stripe-orange: #f28c31;\n --stripe-yellow: #fcd958;\n --stripe-green: #67b848;\n --stripe-blue: #2c93d8;\n margin: 0;\n background-color: #222;\n height: 100%;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: \"Righteous\", cursive;\n overflow: hidden;\n background-image: repeating-linear-gradient(\n 45deg,\n #1a1a1a 0,\n #1a1a1a 1px,\n transparent 1px,\n transparent 10px\n ),\n radial-gradient(#333, #000);\n}\n\n.camera-wrapper {\n position: relative;\n width: 340px;\n height: 400px;\n display: flex;\n justify-content: center;\n perspective: 1000px;\n}\n\n.shutter-input {\n display: none;\n}\n\n.camera-body {\n position: relative;\n width: 320px;\n height: 340px;\n background-color: var(--plastic-beige);\n border-radius: 30px 30px 40px 40px;\n box-shadow:\n inset 0 0 20px rgba(0, 0, 0, 0.1),\n 0 20px 40px rgba(0, 0, 0, 0.5);\n z-index: 10;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 20px;\n overflow: hidden;\n}\n\n.camera-body::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n border-radius: 30px;\n box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.8);\n pointer-events: none;\n z-index: 20;\n}\n\n.rainbow-stripe {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 60px;\n background: linear-gradient(\n to right,\n var(--stripe-red) 20%,\n var(--stripe-orange) 20% 40%,\n var(--stripe-yellow) 40% 60%,\n var(--stripe-green) 60% 80%,\n var(--stripe-blue) 80%\n );\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);\n z-index: 1;\n}\n\n.bottom-lip {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 20px;\n background: #e6e2d8;\n border-top: 2px solid #ccc;\n z-index: 15;\n}\n\n.lens-housing {\n width: 180px;\n height: 180px;\n background: #111;\n border-radius: 50%;\n margin-top: 40px;\n position: relative;\n z-index: 5;\n box-shadow:\n 0 10px 20px rgba(0, 0, 0, 0.4),\n 0 0 0 4px #ccc;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.lens-ring {\n width: 160px;\n height: 160px;\n border-radius: 50%;\n border: 2px dashed #444;\n position: absolute;\n animation: focus-turn 10s linear infinite;\n}\n@keyframes focus-turn {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n.lens-glass {\n width: 120px;\n height: 120px;\n border-radius: 50%;\n background: radial-gradient(circle at 30% 30%, #444, #000 70%);\n position: relative;\n overflow: hidden;\n box-shadow: inset 0 0 10px #000;\n}\n\n.lens-glass::after {\n content: \"\";\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(\n circle at 60% 40%,\n rgba(255, 255, 255, 0.1) 0%,\n transparent 10%\n ),\n radial-gradient(\n circle at 40% 60%,\n rgba(100, 0, 255, 0.2) 0%,\n transparent 20%\n ),\n linear-gradient(\n 135deg,\n transparent 45%,\n rgba(255, 255, 255, 0.2) 50%,\n transparent 55%\n );\n}\n\n.aperture {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 40px;\n height: 40px;\n background: #050505;\n border-radius: 50%;\n border: 1px solid #333;\n}\n\n.viewfinder {\n position: absolute;\n top: 30px;\n left: 30px;\n width: 60px;\n height: 50px;\n background: #222;\n border-radius: 5px;\n border: 4px solid #ccc;\n box-shadow: inset 0 0 10px #000;\n overflow: hidden;\n}\n.viewfinder::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);\n}\n\n.flash-unit {\n position: absolute;\n top: 30px;\n right: 30px;\n width: 80px;\n height: 30px;\n background: #eee;\n border: 2px solid #ccc;\n border-radius: 4px;\n background-image: repeating-linear-gradient(\n 90deg,\n #ddd 0,\n #ddd 2px,\n transparent 2px,\n transparent 4px\n );\n}\n\n.shutter-btn {\n position: absolute;\n bottom: 40px;\n right: 30px;\n width: 60px;\n height: 60px;\n background: radial-gradient(circle at 30% 30%, #ff4d4d, #cc0000);\n border-radius: 50%;\n border: 4px solid #ddd;\n cursor: pointer;\n box-shadow:\n 0 5px 10px rgba(0, 0, 0, 0.3),\n inset 0 2px 5px rgba(255, 255, 255, 0.4);\n z-index: 20;\n transition: transform 0.1s;\n}\n\n.shutter-btn:active {\n transform: scale(0.95);\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);\n}\n\n.label-plate {\n position: absolute;\n bottom: 40px;\n left: 30px;\n font-size: 0.8rem;\n color: #888;\n background: #e6e2d8;\n padding: 5px;\n border: 1px solid #ccc;\n border-radius: 4px;\n}\n\n.film-slot {\n position: absolute;\n top: 300px;\n left: 50%;\n transform: translateX(-50%);\n width: 240px;\n height: 280px;\n background: #fff;\n padding: 15px 15px 50px 15px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n z-index: 1;\n transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.film-image {\n width: 100%;\n height: 100%;\n background: #000;\n overflow: hidden;\n position: relative;\n}\n\n.film-content {\n width: 100%;\n height: 100%;\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E\"),\n linear-gradient(to bottom, #87ceeb, #228b22);\n background-size: cover;\n opacity: 0;\n}\n\n.film-content::after {\n content: \"⛰\";\n position: absolute;\n bottom: 10px;\n left: 20px;\n font-size: 4rem;\n color: #333;\n opacity: 0.8;\n}\n.film-content::before {\n content: \"☀\";\n position: absolute;\n top: 10px;\n right: 10px;\n font-size: 3rem;\n color: yellow;\n opacity: 0.8;\n}\n\n#snap:checked ~ .film-slot {\n transform: translate(-50%, 220px) rotate(-2deg);\n z-index: 5;\n}\n#snap:checked ~ .film-slot .film-content {\n animation: develop 4s ease-in forwards;\n animation-delay: 0.6s;\n}\n\n@keyframes develop {\n 0% {\n opacity: 0;\n filter: grayscale(100%) contrast(200%);\n }\n 50% {\n opacity: 0.5;\n filter: grayscale(50%) contrast(150%);\n }\n 100% {\n opacity: 1;\n filter: grayscale(0%) contrast(100%) sepia(20%);\n }\n}\n.flash-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #fff;\n opacity: 0;\n pointer-events: none;\n z-index: 100;\n}\n\n#snap:checked ~ .flash-overlay {\n animation: flash-bang 0.2s ease-out;\n}\n\n@keyframes flash-bang {\n 0% {\n opacity: 0.8;\n }\n 100% {\n opacity: 0;\n }\n}\n#snap:checked ~ .camera-body .shutter-btn {\n transform: scale(0.95);\n box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);\n}\n\n.shutter-label {\n width: 100%;\n height: 100%;\n display: block;\n}\n"}

quick-deer-45

👁 实时预览

📝 源代码