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

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

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