{"html":"

Team Reactions

Hover to interact

\n\n

\n AMY\n \n

\n\n

\n JAKE\n \n

\n\n

\n LIAM\n \n

\n\n

\n ZARA\n \n

\n\n

\n FINN\n \n

\n\n

\n ZOE\n \n

\n","css":"/* --- Header Text Styles (Replacing h2/p) --- */\n.reaction-header {\n text-align: center;\n}\n\n.reaction-title {\n color: #1e293b;\n font-size: 1.5rem;\n font-weight: 700;\n margin: 0;\n line-height: 1.2;\n}\n\n.reaction-subtitle {\n color: #64748b;\n font-size: 0.9rem;\n margin-top: 0.5rem;\n line-height: 1.5;\n}\n\n/* --- Main Bar --- */\n.reaction-bar {\n display: flex;\n gap: 8px;\n padding: 16px 24px;\n background: rgba(255, 255, 255, 0.9);\n border: 1px solid rgba(255, 255, 255, 0.6);\n border-radius: 60px;\n box-shadow:\n 0 4px 6px -1px rgba(0, 0, 0, 0.05),\n 0 10px 15px -3px rgba(0, 0, 0, 0.05),\n 0 0 0 1px rgba(0, 0, 0, 0.02);\n backdrop-filter: blur(20px);\n}\n\n/* --- Item Wrapper --- */\n.reaction-item {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n/* --- Button Styling --- */\n.reaction-btn {\n width: 56px;\n height: 56px;\n padding: 0;\n border: 3px solid #ffffff;\n border-radius: 50%;\n background-color: #f1f5f9;\n cursor: pointer;\n position: relative;\n z-index: 1;\n transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n}\n\n/* SVG Icon Styling */\n.reaction-btn svg {\n width: 100%;\n height: 100%;\n display: block;\n}\n\n/* --- Tooltip Styling --- */\n.tooltip {\n position: absolute;\n top: -55px;\n background-color: #1e293b;\n color: white;\n padding: 6px 12px;\n border-radius: 8px;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n opacity: 0;\n pointer-events: none;\n transform: translateY(10px) scale(0.9);\n transition: all 0.2s ease-out;\n white-space: nowrap;\n z-index: 0;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n}\n\n/* Tooltip Arrow */\n.tooltip::after {\n content: \"\";\n position: absolute;\n bottom: -4px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 5px solid #1e293b;\n}\n\n/* --- Interaction Effects --- */\n\n/* 1. Zoom the Avatar on Hover */\n.reaction-item:hover .reaction-btn {\n transform: scale(1.5) translateY(-10px);\n z-index: 10;\n box-shadow:\n 0 20px 25px -5px rgba(0, 0, 0, 0.1),\n 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n border-color: #ffffff;\n}\n\n/* 2. Show the Tooltip on Hover */\n.reaction-item:hover .tooltip {\n opacity: 1;\n transform: translateY(0) scale(1);\n z-index: 20;\n transition-delay: 0.1s;\n}\n\n/* 3. Dim Siblings on Container Hover */\n.reaction-bar:hover .reaction-btn:not(:hover) {\n filter: grayscale(20%) opacity(0.7);\n transform: scale(0.95);\n}\n"}

rotten-octopus-10

👁 实时预览

📝 源代码