tailwind实现暗色亮色切换的团队介绍圆环效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：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=&q.........完整代码请登录后点击上方下载按钮下载查看