tailwind实现暗色亮色切换的团队介绍圆环效果代码
代码语言:html
所属分类:其他
代码描述:tailwind实现暗色亮色切换的团队介绍圆环效果代码,点击不同的团队成员图像,可显示名字和职位。
代码标签: tailwind 暗色 亮色 切换 团队 介绍 圆环
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.1.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" /> <style> .avatar { --radius: 14rem; --d: calc(var(--i) / var(--total)); --r-offset: -0.15turn; --r-amount: 1turn; --r: calc((var(--r-amount) * var(--d)) + var(--r-offset)); transform: rotate(var(--r)) translate(var(--radius)) rotate(calc(-1 * var(--r))); } </style> </head> <body class="bg-white min-h-screen grid place-content-center"> <!-- theme toggle radio --> <input type="checkbox" id="theme" class="sr-only peer/theme" checked> <div style="--total: 12;" class="relative rounded-full grid size-72 [grid-template-areas:'stack'] place-content-center [&>label]:[grid-area:stack] [&>label]:size-20 [&>label]:rounded-full [&>label]:grid [&>label]:place-content-center [&>label]:bg-white/20 [&>label]:relative [&>label]:text-sky-500 [&>label]:text-xl [&>label]:transition-all [&>label]:duration-500 [&>label]:cursor-pointer [&>label]:ring-4 [&>label]:ring-white/5 [&_img]:rounded-full [&_img]:s-full [&_img]:object-cover [&_img]:transition-all [&_img]:duration-1000 [&_img]:ease-in-out [&_svg]:transition-all [&_svg]:duration-500 [&_svg]:ease-in-out [&_svg]:absolute [&_svg]:top-2/4 [&_svg]:left-2/4 [&_svg]:-translate-x-2/4 [&_svg]:-translate-y-2/4 [&_svg]:w-[125px] [&_svg]:opacity-0 [&_svg]:-z-10 [&_input:checked+label]:transform-none [&_input:checked+label]:duration-1000 [&_input:checked+label>img]:scale-[200%] [&_input:checked+label>svg]:opacity-100 [&_input:checked+label>svg]:scale-[225%] [&_input:checked+label>svg]:rotate-45 [&_input:checked+label>svg]:[transition-delay:700ms,500ms,2000ms] peer-checked/theme:before:[&_#center]:-inset-[3000%] peer-checked/theme:[&>label]:text-white "> <div id="center" class="absolute inset-0 m-auto size-32 bg-sky-600 border border-white/40 rounded-full grid place-content-center uppercase font-thin tracking-wider text-slate-100 text-lg before:absolute before:-inset-0 before:bg-sky-950 before:rounded-full before:-z-10 before:transition-all before:duration-1000 peer-checked/theme:before:-inset-[3000%] ">The Team</div> <input type="radio" name="radio-avatar" id="radio-avatar-1" class="sr-only"> <label id="avatar-1" for="radio-avatar-1" class="avatar" style="--i:1"> <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="Steven Robinson"> <svg viewBox="0 0 300 300"> <text fill="currentColor"> <textPath xlink:href="#circlePath">Steven Robinson - Web Developer</textPath> </text> </svg> </label> <input type="radio" name="radio-avatar" id="radio-avatar-2" class="sr-only"> <label id="avatar-2" for="radio-avatar-2" class="avatar" style="--i:2"> <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="Mari Johnson"> <svg viewBox="0 0 300 300"> <text fill="currentColor"> <textPath xlink:href="#circlePath">Mari Johnson - UX Designer</textPath> </text> </svg> </label> <input type="radio" name="radio-avatar" id="radio-avatar-3" class="sr-only"> <label id="avatar-3" for="radio-avatar-3" class="avatar" style="--i:3"> <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="Bob"> <svg viewBox="0 0 300 300"> <text fill="currentColor"> <textPath xlink:href="#circlePath">Bob - Designer</textPath> </text> </svg> </label> <input type="radio" name="radio-avatar" id="radio-avatar-4" class="sr-only"> <label id="avatar-4" for="radio-avatar-4" class="avatar" style="--i:4"> <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="Susan Williams"> <svg viewBox="0 0 300 300"> <text fill="currentColor"> <textPath xlink:href="#circlePath">Susan Williams - Full Stack Developer</textPath> </text> </svg> </label> <input type="radio" name="radio-avatar" id="radio-avatar-5" class="sr-only"> <label id="avatar-5" for="radio-avatar-5" class="avatar" style="--i:5"> <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="James Braun"> <svg viewBox="0 0 300 300"> <text fill="currentColor"> <textPath xlink:href="#circlePath">James Braun - Content Creator</textPath> </text> </svg> </label> <input type="radio" name="radio-avatar" id="radio-avatar-6" class="sr-only"> <label id="avatar-6" for="radio-avatar-6" class="avatar" style="--i:6"> <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="Andrew Charles"> <svg viewBox="0 0 300 300"> <text fill="currentColor"> <textPath xlink:href="#circlePath">Andrew Charles - Front End Developer</textPath> </text> </svg> </label> <input type="radio" name="radio-avatar" id="radio-avatar-7" class="sr-only"> <label id="avatar-7" for="radio-avatar-7" class="ava.........完整代码请登录后点击上方下载按钮下载查看
网友评论0