HTML、CSS 和 JavaScript 組件庫 - 第 3 頁

圖標框線左側登入

#form-010-icon-border-radius-left-login

<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> </head> <style type="text/tailwindcss"> .content { @apply max-w-sm w-full rounded-3xl overflow-hidden shadow-xl; } .top-content { @apply flex justify-center items-center py-16 px-5 bg-black; } .svg { @apply fill-white w-14 h-14; } .bottom-content { @apply bg-gradient-to-b from-black to-white rounded-b-3xl overflow-hidden; } .login-content { @apply bg-slate-100 rounded-tl-[60px] py-10 px-7 space-y-10; } .title { @apply text-4xl text-center text-black; } .spy-five { @apply space-y-5; } .input-content { @apply rounded-lg bg-white px-5 py-3 space-y-1; } .input-title { @apply font-bold text-black; } .input { @apply w-full outline-none text-black; } .btn { @apply p-3 bg-black text-white w-full rounded-lg cursor-pointer; } .sign-up { @apply mt-28 text-center text-black font-bold text-sm; } </style> <body class="min-h-svh flex items-center justify-center w-full"> <div class="content"> <div class="top-content"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" class="svg"> <path d="M320 80C377.4 80 424 126.6 424 184C424 241.4 377.4 288 320 288C262.6 288 216 241.4 216 184C216 126.6 262.6 80 320 80zM96 152C135.8 152 168 184.2 168 224C168 263.8 135.8 296 96 296C56.2 296 24 263.8 24 224C24 184.2 56.2 152 96 152zM0 480C0 409.3 57.3 352 128 352C140.8 352 153.2 353.9 164.9 357.4C132 394.2 112 442.8 112 496L112 512C112 523.4 114.4 534.2 118.7 544L32 544C14.3 544 0 529.7 0 512L0 480zM521.3 544C525.6 534.2 528 523.4 528 512L528 496C528 442.8 508 394.2 475.1 357.4C486.8 353.9 499.2 352 512 352C582.7 352 640 409.3 640 480L640 512C640 529.7 625.7 544 608 544L521.3 544zM472 224C472 184.2 504.2 152 544 152C583.8 152 616 184.2 616 224C616 263.8 583.8 296 544 296C504.2 296 472 263.8 472 224zM160 496C160 407.6 231.6 336 320 336C408.4 336 480 407.6 480 496L480 512C480 529.7 465.7 544 448 544L192 544C174.3 544 160 529.7 160 512L160 496z" /> </svg> </div> <div class="bottom-content"> <div class="login-content"> <p class="title">Login</p> <div class="spy-five"> <div class="input-content"> <p class="input-title">Email</p> <input type="text" class="input" placeholder="test@example"> </div> <div class="input-content"> <p class="input-title">Password</p> <input type="password" class="input" placeholder="⬤ ⬤ ⬤ ⬤ ⬤ ⬤"> </div> <button class="btn">Login</button> </div> <p class="sign-up">Don't have any account? Sign Up</p> </div> </div> </div> </body> </html>

漸層按鈕與懸停效果

#button-000-gradient

漸層背景

#cards-001-GradientBackground

漸變發光卡片

#cards-003-GradientGlow

聚焦圖標填充效果

#form-001-forcus-icon-fill

<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> </head> <style type="text/tailwindcss"> .bg { @apply w-full h-full absolute top-0 left-0; } .bg-opacity { @apply absolute top-0 left-0 w-full h-full bg-amber-500/30; } .form { @apply max-w-80 w-full relative; } .top-content { @apply bg-white p-5 divide-y; } .title { @apply text-black font-bold pb-2.5; } .top-space { @apply space-y-5 pt-3; } .form-content { @apply flex flex-row-reverse overflow-hidden; } .input-style { @apply w-full flex-1 border border-black/30 focus:border-amber-500 px-1 py-1 focus:outline-none; } .icon-content { @apply bg-amber-500 w-0 h-[34px] peer-focus:w-9 transition-all duration-300 overflow-hidden; } .icon { @apply w-full h-full fill-white p-2; } .link { @apply block w-max text-amber-500 text-xs; } .btn { @apply p-5 bg-amber-500 flex justify-center items-center text-white cursor-pointer w-full; } </style> <body class="min-h-svh flex items-center justify-center w-full"> <img src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="bg" alt=""> <div class="bg-opacity"></div> <form class="form"> <div class="top-content"> <p class="title">Log in</p> <div class="top-space"> <div class="form-content"> <input type="text" class="peer input-style" placeholder="email"> <div class="icon-content"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="icon"> <path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z" /> </svg> </div> </div> <div class="form-content"> <input type="password" class="peer input-style" placeholder="password"> <div class="icon-content"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="icon"> <path d="M420-680q0-33 23.5-56.5T500-760q33 0 56.5 23.5T580-680q0 33-23.5 56.5T500-600q-33 0-56.5-23.5T420-680ZM500 0 320-180l60-80-60-80 60-85v-47q-54-32-87-86.5T260-680q0-100 70-170t170-70q100 0 170 70t70 170q0 67-33 121.5T620-472v352L500 0ZM340-680q0 56 34 98.5t86 56.5v125l-41 58 61 82-55 71 75 75 40-40v-371q52-14 86-56.5t34-98.5q0-66-47-113t-113-47q-66 0-113 47t-47 113Z" /> </svg> </div> </div> <a href="" class="link">Forgot your password?</a> </div> </div> <button type="button" class="btn"> <p>Log in</p> </button> </form> </body> </html>

模糊背景選單

#model-004-blur-bg-menu

<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script> </head> <style type="text/tailwindcss"> .content { @apply max-w-xs w-full mx-auto relative min-h-120 overflow-hidden; } .bg { @apply absolute top-0 left-0 w-full h-full object-cover brightness-75; } .title { @apply absolute bottom-0 left-0 p-5 w-full space-y-2; } .top-title { @apply text-white/70 text-sm; } .bottom-title { @apply text-white/80 text-3xl; } .border-line { @apply w-full h-[1px] bg-white/30; } .menu-content { @apply absolute top-5 left-5 w-6 space-y-1 z-30 cursor-pointer; } .line { @apply w-full bg-white h-0.5 rounded; } .menu { @apply absolute top-0 left-0 w-full h-full py-12 opacity-0 pointer-events-none scale-75 z-20; } .ul { @apply divide-y divide-white px-5; } .link { @apply py-5 text-white block transition-all duration-300; } .link:hover { @apply text-white/50; } .link-title { @apply transition-all duration-500; } .link:hover .link-title { @apply translate-x-5; } </style> <body class="min-h-svh flex items-center justify-center w-full"> <div class="content"> <img src="https://images.unsplash.com/photo-1758411897725-0bd3f733c66d?q=80&w=688&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="bg" alt=""> <div class="title"> <p class="top-title">PHOTO</p> <p class="bottom-title">SUNSET</p> <div class="border-line"></div> </div> <div class="menu-content btn"> <p class="line"></p> <p class="line"></p> </div> <div class="menu"> <ul class="ul"> <li> <a href="#" class="link group"> <p class="link-title">Home</p> </a> </li> <li> <a href="#" class="link group"> <p class="link-title">About</p> </a> </li> <li> <a href="#" class="link group"> <p class="link-title">Contact</p> </a> </li> </ul> </div> </div> <script> document.addEventListener("DOMContentLoaded", (event) => { let btn = document.querySelector('.btn'); let status = false; btn.addEventListener('click', function () { if (status == false) { gsap.to('.one', { duration: 0.5, rotate: '45deg', y: '3px' }); gsap.to('.two', { duration: 0.5, rotate: '-45deg', y: '-3px' }); gsap.to('.menu', { duration: 0.5, opacity: 1, pointerEvents: 'auto', scale: 1 }); gsap.to('.bg', { duration: 0.5, filter: "blur(8px) brightness(0.75)" }); gsap.to('.title', { duration: 0.5, filter: "blur(8px) brightness(0.75)" }); } else { gsap.to('.one', { duration: 0.5, rotate: 0, y: 0 }); gsap.to('.two', { duration: 0.5, rotate: 0, y: 0 }); gsap.to('.menu', { duration: 0.5, opacity: 0, pointerEvents: 'none', scale: 0.75 }); gsap.to('.bg', { duration: 0.5, filter: "blur(0) brightness(0.75)" }); gsap.to('.title', { duration: 0.5, filter: "blur(0) brightness(0.75)" }); } status = !status; }); }); </script> </body> </html>

箭頭交換按鈕

#button-003-ArrowSwap

膠囊提示

#tooltip-005-CapsuleTooltip

橢圓形裁剪菜單

#animation-007-clipPath-ellipse-menu

<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script> </head> <style type="text/tailwindcss"> .container { @apply max-w-lg w-full relative; } .content { @apply flex justify-end h-screen w-full bg-black/80 shadow-lg; } .btn { @apply pt-5 pl-8 pb-7 pr-5 bg-white h-fit rounded-bl-full cursor-pointer z-10; } .btn-content { @apply w-8 h-7 relative; } .line { @apply relative w-full h-full; } .top-line { @apply w-full h-[1px] bg-black absolute top-0 left-0; } .mid-line { @apply w-full h-[1px] bg-black absolute top-1/2 left-0 -translate-y-1/2; } .bottom-line { @apply w-full h-[1px] bg-black absolute bottom-0 left-0; } .close { @apply absolute top-0 left-0 w-full h-full scale-0; } .close-line-one { @apply w-full h-[1px] bg-black absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-45; } .close-line-two { @apply w-full h-[1px] bg-black absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 -rotate-45; } .menulist { @apply fixed top-0 left-0 w-full h-screen [clip-path:ellipse(0px_0px_at_100%_0%)] pointer-events-none bg-white px-5 py-20; } .ul { @apply space-y-5 text-lg; } </style> <body class="min-h-svh flex items-center justify-center"> <div class="container"> <div class="content"> <div class="btn"> <div class="btn-content"> <div class="line"> <span class="top-line"></span> <span class="mid-line"></span> <span class="bottom-line"></span> </div> <div class="close"> <span class="close-line-one"></span> <span class="close-line-two"></span> </div> </div> </div> </div> <div class="menulist"> <ul class="ul"> <li>About</li> <li>News</li> <li>Products</li> <li>Contact us</li> </ul> </div> </div> <script> document.addEventListener("DOMContentLoaded", (event) => { let btn = document.querySelector('.btn') let tl = gsap.timeline() tl.to('.line', { duration: .3, scale: 0 }) tl.to('.close', { duration: .3, scale: 1 }, "<") tl.to('.menulist', { clipPath: 'ellipse(200% 200% at 100% 0%)', duration: 1.3, pointerEvents: 'auto' }, "<") tl.pause() let open = false btn.addEventListener('click', function () { if (open) { tl.reverse() } else { tl.play() } open = !open }) }); </script> </body> </html>

螢光掃過填滿

#animations-001-HighlightSweep

頭像資訊提示

#alert-003-AvatarInfo

擴展發光圓圈

#animation-002-ExpandingGlowCircle.mdx

簡單旋轉載入

#loader-001-SimpleSpinner

簡單彈窗對話框

#modal-simple

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> <style> html, body { height: 100%; min-height: 100vh; } </style> </head> <body class="p-8 bg-gray-100 min-h-screen"> <button id="openModal" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"> Open Modal </button>  <div id="modalOverlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 invisible transition-all duration-300 z-50">  <div class="bg-white rounded-xl shadow-xl p-6 w-full max-w-md mx-4 transform scale-95 transition-transform duration-300"> <div class="flex justify-between items-center mb-4"> <h2 class="text-xl font-bold text-gray-800">Modal Title</h2> <button id="closeModal" class="text-gray-400 hover:text-gray-600 text-2xl leading-none"> × </button> </div> <p class="text-gray-600 mb-6"> This is a simple modal dialog. You can put any content here like forms, images, or other information. </p> <div class="flex space-x-3"> <button id="confirmBtn" class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"> Confirm </button> <button id="cancelBtn" class="flex-1 px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition-colors"> Cancel </button> </div> </div> </div> <script> const openBtn = document.getElementById('openModal'); const closeBtn = document.getElementById('closeModal'); const confirmBtn = document.getElementById('confirmBtn'); const cancelBtn = document.getElementById('cancelBtn'); const overlay = document.getElementById('modalOverlay'); const modal = overlay.querySelector('.bg-white'); function openModal() { overlay.classList.remove('opacity-0', 'invisible'); modal.classList.remove('scale-95'); modal.classList.add('scale-100'); } function closeModal() { overlay.classList.add('opacity-0', 'invisible'); modal.classList.add('scale-95'); modal.classList.remove('scale-100'); } openBtn.addEventListener('click', openModal); closeBtn.addEventListener('click', closeModal); cancelBtn.addEventListener('click', closeModal); confirmBtn.addEventListener('click', function() { alert('Confirmed!'); closeModal(); }); // Close on background click overlay.addEventListener('click', function(e) { if (e.target === overlay) { closeModal(); } }); // Close on ESC key document.addEventListener('keydown', function(e) { if (e.key === 'Escape') { closeModal(); } }); </script> </body> </html>

簡單線條菜單

#animation-004-SimpleLineMenu

雙背景滑動按鈕效果

#button-010-double-bg-slide

<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> </head> <style type="text/tailwindcss"> .content { @apply max-w-80 w-full rounded-full bg-amber-300 py-5 px-10 relative overflow-hidden cursor-pointer before:absolute before:top-0 before:left-0 before:w-[120%] before:h-full before:bg-[#1d4ed8] before:-translate-x-full before:rounded-full before:pointer-events-none after:absolute after:top-0 after:left-0 after:-translate-x-full after:w-full after:h-full after:bg-amber-300 after:rounded-full after:pointer-events-none; } .content:hover::before { @apply animate-[bg-color_0.5s_linear_forwards]; } .content:hover::after { @apply animate-[bg-color_0.9s_ease-in-out_forwards]; } .text { @apply font-bold text-xl relative z-10; } .icon-content { @apply absolute top-1/2 -translate-y-1/2 right-2.5 bg-black rounded-full w-10 h-10 overflow-hidden z-10; } .icon { @apply fill-white w-6 h-6 transition-all duration-300 absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2; } .content:hover .icon-content .icon { @apply animate-[arrow_0.5s_linear_forwards]; } </style> <style> @keyframes bg-color { 0% { transform: translateX(0); } 100% { transform: translateX(200%); } } @keyframes arrow { 0% { transform: translateX(0); } 49% { transform: translateX(40px); display: none; } 50% { transform: translateX(-40px); display: none; } 100% { transform: translateX(0); } } </style> <body class="min-h-svh flex items-center justify-center"> <div class="content group"> <p class="text">Button</p> <div class="icon-content"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class=" icon"> <path d="M334.5 414c8.8 3.8 19 2 26-4.6l144-136c4.8-4.5 7.5-10.8 7.5-17.4s-2.7-12.9-7.5-17.4l-144-136c-7-6.6-17.2-8.4-26-4.6s-14.5 12.5-14.5 22l0 72L32 192c-17.7 0-32 14.3-32 32l0 64c0 17.7 14.3 32 32 32l288 0 0 72c0 9.6 5.7 18.2 14.5 22z" /> </svg> </div> </div> </body> </html>

雙邊框卡片

#cards-004-DoubleBorder

邊框上提

#button-001-OffsetBorderLift

邊框旋轉加載器

#loader-001-bg-border-spinner-border

邊框旋轉加載器

#loader-001-bg-border-spinner-border

懸停提示框

#tooltip-hover

懸掛註冊表單

#modal-002-hang-register-form

<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script> </head> <style type="text/tailwindcss"> .content { @apply max-w-96 relative w-full; } .relative { @apply relative; } .login-content { @apply max-w-96 w-[95%] bg-white shadow-md py-10 rounded-md space-y-7 mx-auto; } .login-title { @apply text-3xl text-red-600 font-black border-l-4 border-red-600 pl-10 py-0.5; } .form-login { @apply px-10 space-y-10; } .login-input { @apply outline-none w-full border-b border-black py-1 focus:border-red-600 transition-all duration-300; } .login-form-title { @apply text-2xl absolute top-1/2 -translate-y-1/2 left-0 text-black/50 peer-focus:text-sm peer-focus:top-0 peer-focus:-translate-y-3 transition-all duration-300 peer-valid:-translate-y-3 pointer-events-none peer-valid:text-sm peer-valid:top-0; } .flex-center { @apply flex justify-center; } .login-btn { @apply px-20 py-3 border border-black/30 text-2xl font-bold transition-all duration-300 text-black/30 cursor-pointer; } .login-btn:hover { @apply border-red-500 text-red-500; } .forgot-title { @apply text-xl text-black/30 transition-all duration-300; } .forgot-title:hover { @apply text-red-600; } .register-content { @apply w-20 h-20 absolute top-5 right-0 translate-x-8 overflow-hidden rounded-md; } .register-btn { @apply relative w-full h-full bg-red-400 flex justify-center items-center rounded-full cursor-pointer; } .edit-icon { @apply fill-white w-10; } .register-form { @apply py-10 absolute top-0 left-0 h-full w-full z-10 space-y-10 opacity-0 pointer-events-none; } .close-btn { @apply absolute top-10 right-5 cursor-pointer; } .close-btn-icon { @apply fill-white w-10 h-10; } .spy-ten { @apply space-y-10; } .register-title { @apply text-3xl text-white font-black border-l-4 border-white pl-10 py-0.5 translate-x-20; } .register-space { @apply px-10 space-y-10; } .register-input { @apply relative translate-x-20 opacity-0; } .register-input-input { @apply outline-none w-full border-b border-white py-1 focus:border-white transition-all duration-300 text-white; } .register-form-title { @apply text-2xl absolute top-1/2 -translate-y-1/2 left-0 text-white peer-focus:text-sm peer-focus:top-0 peer-focus:-translate-y-3 transition-all duration-300 peer-valid:-translate-y-3 pointer-events-none peer-valid:text-sm peer-valid:top-0; } .register-form-btn { @apply px-20 py-3 text-2xl font-bold cursor-pointer w-full bg-white text-red-500 translate-x-full; } .register-form-btn:hover { @apply bg-white/80; } </style> <body class="min-h-svh flex items-center justify-center w-full"> <div class="relative"> <div class="login-content"> <p class="login-title">LOGIN</p> <div class="form-login"> <div class="relative"> <input type="text" class="peer login-input" required=""> <p class=" login-form-title">Username</p> </div> <div class="relative"> <input type="text" class="peer login-input" required=""> <p class="login-form-title">Password</p> </div> <div class="flex-center"> <button type="button"class="login-btn">LOGIN</button> </div> <div class="flex-center"> <a href="" class="forgot-title">Forgot your password?</a> </div> </div> </div> <div class="register-content"> <div class="register-btn"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="edit-icon"> <path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z" /> </svg> </div> <div class="register-form"> <div class="close-btn"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="close-btn-icon"> <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" /> </svg> </div> <div class="spy-ten"> <p class="register-title">Register</p> <div class="register-space"> <div class="register-input register-gsap"> <input type="text" class="register-input-input peer" required=""> <p class="register-form-title">Username</p> </div> <div class="register-input register-gsap"> <input type="text" class="register-input-input peer" required=""> <p class="register-form-title">Password</p> </div> <div class="register-input register-gsap"> <input type="text" class="register-input-input peer" required=""> <p class="register-form-title">Repeat Password</p> </div> <button type="button" class="register-gsap register-form-btn">NEXT</button> </div> </div> </div> </div> </div> <script> document.addEventListener("DOMContentLoaded", (event) => { let registerBtn = document.querySelector('.register-btn'); let closeBtn = document.querySelector('.close-btn'); registerBtn.addEventListener('click', function () { let tl = gsap.timeline(); tl.to('.register-content', { duration: 0.3, width: '100%', height: '100%', top: "10px", x: 0 }) .to('.register-btn', { duration: 0.3, scale: 2, cursor: 'auto', pointerEvents: 'none' }, '<') .to('.edit-icon', { opacity: 0, pointerEvents: 'none', duration: 0 }, '<') .to('.register-form', { opacity: 1, pointerEvents: 'auto', duration: 0 }, '< 0.3') .to('.register-title', { x: 0, pointerEvents: 'none', duration: 0.3, opacity: 1 }, '<') .to('.register-gsap', { x: 0, stagger: 0.1, opacity: 1, ease: 'linear' }, '<'); }); closeBtn.addEventListener('click', function () { let tl = gsap.timeline(); tl.to('.register-gsap', { x: 80, opacity: 0, duration: 0 }) .to('.register-title', { x: 80, pointerEvents: 'none', duration: 0, opacity: 0 }, '<') .to('.register-form', { opacity: 0, pointerEvents: 'none', duration: 0 }, '<') .to('.register-btn', { duration: 0.3, scale: 1, cursor: 'pointer', pointerEvents: 'auto' }) .to('.register-content', { duration: 0.3, width: '80px', height: '80px', top: "20px", x: 32 }, '<') .to('.edit-icon', { opacity: 1, pointerEvents: 'auto', duration: 0.3 }, '<') }); }); </script> </body> </html>

Z-Index 表單

#form-004-zindex-form

背景由左下到右上顯示網站名稱

#tooltip-008-bg-to-top-right-show-platform

<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> </head> <style type="text/tailwindcss"> .content { @apply flex space-x-3; } .box-facebook { @apply w-20 h-20 bg-white rounded-lg p-1 flex justify-center items-center shadow-[0px_1px_4px_rgb(0_0_0/0.1)] cursor-pointer relative overflow-hidden; } .box-facebook::before { @apply absolute top-0 left-0 w-[125%] h-[125%] rotate-45 bg-[#4267B2] translate-y-[90%] -translate-x-[105%] pointer-events-none transition-all duration-300; } .box-facebook:hover::before { @apply -translate-x-[10%] -translate-y-[15%]; } .box-facebook::after { @apply content-['facebook'] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white opacity-0 text-[5px]; } .box-facebook:hover::after { @apply opacity-100; } .svg-facebook { @apply w-4 fill-[#4267B2] transition-all duration-300 relative z-10; } .box-facebook:hover .svg-facebook { @apply opacity-0; } .box-youtube { @apply w-20 h-20 bg-white rounded-lg p-1 flex justify-center items-center shadow-[0px_1px_4px_rgb(0_0_0/0.1)] cursor-pointer relative overflow-hidden; } .box-youtube::before { @apply absolute top-0 left-0 w-[125%] h-[125%] rotate-45 bg-[#FF0000] translate-y-[90%] -translate-x-[105%] pointer-events-none transition-all duration-300; } .box-youtube:hover::before { @apply -translate-x-[10%] -translate-y-[15%]; } .box-youtube::after { @apply content-['youtube'] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white opacity-0 text-[5px]; } .box-youtube:hover::after { @apply opacity-100; } .svg-youtube { @apply w-4 fill-[#FF0000] transition-all duration-300 relative z-10; } .box-youtube:hover .svg-youtube { @apply opacity-0; } .box-x { @apply w-20 h-20 bg-white rounded-lg p-1 flex justify-center items-center shadow-[0px_1px_4px_rgb(0_0_0/0.1)] cursor-pointer relative overflow-hidden; } .box-x::before { @apply absolute top-0 left-0 w-[125%] h-[125%] rotate-45 bg-black translate-y-[90%] -translate-x-[105%] pointer-events-none transition-all duration-300; } .box-x:hover::before { @apply -translate-x-[10%] -translate-y-[15%]; } .box-x::after { @apply content-['X'] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white opacity-0 text-[5px]; } .box-x:hover::after { @apply opacity-100; } .svg-x { @apply w-4 fill-black transition-all duration-300 relative z-10; } .box-x:hover .svg-x { @apply opacity-0; } </style> <body class="min-h-svh flex items-center justify-center"> <div class="content"> <div class="box-facebook group"> <svg xmlns="http://www.w3.org/2000/svg" class="svg-facebook" viewBox="0 0 640 640"> <path d="M240 363.3L240 576L356 576L356 363.3L442.5 363.3L460.5 265.5L356 265.5L356 230.9C356 179.2 376.3 159.4 428.7 159.4C445 159.4 458.1 159.8 465.7 160.6L465.7 71.9C451.4 68 416.4 64 396.2 64C289.3 64 240 114.5 240 223.4L240 265.5L174 265.5L174 363.3L240 363.3z" /> </svg> </div> <div class="box-youtube group"> <svg xmlns="http://www.w3.org/2000/svg" class="svg-youtube" viewBox="0 0 576 512"> <path d="M549.7 124.1C543.5 100.4 524.9 81.8 501.4 75.5 458.9 64 288.1 64 288.1 64S117.3 64 74.7 75.5C51.2 81.8 32.7 100.4 26.4 124.1 15 167 15 256.4 15 256.4s0 89.4 11.4 132.3c6.3 23.6 24.8 41.5 48.3 47.8 42.6 11.5 213.4 11.5 213.4 11.5s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zM232.2 337.6l0-162.4 142.7 81.2-142.7 81.2z" /> </svg> </div> <div class="box-x group"> <svg xmlns="http://www.w3.org/2000/svg" class="svg-x" viewBox="0 0 640 640"> <path d="M453.2 112L523.8 112L369.6 288.2L551 528L409 528L297.7 382.6L170.5 528L99.8 528L264.7 339.5L90.8 112L236.4 112L336.9 244.9L453.2 112zM428.4 485.8L467.5 485.8L215.1 152L173.1 152L428.4 485.8z" /> </svg> </div> </div> </body> </html>