tailwind实现带入场动画渐显的tab选项卡切换代码-html代码-BFW代码库

代码语言：html

所属分类：选项卡

代码描述：tailwind实现带入场动画渐显的tab选项卡切换代码

下面为部分代码预览，完整代码请点击下载或在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.3.js"></script>
<link rel="stylesheet"  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

</head>


<body class="bg-gradient-to-t from-sky-950 to-sky-500 flex flex-col justify-center items-center min-h-screen px-4
    [&_*]:transition-all
    [&_*]:ease-in-out
">

  <input class="peer/option1 sr-only" id="option-1" type="radio" name="panel" checked />
  <input class="peer/option2 sr-only" id="option-2" type="radio" name="panel" />
  <input class="peer/option3 sr-only" id="option-3" type="radio" name="panel" />
  <input class="peer/option4 sr-only" id="option-4" type="radio" name="panel" />

  <nav class="flex flex-col sm:flex-row items-center justify-end gap-2  w-full sm:w-fit
        [&_*]:duration-300
        *:flex
        *:items-center
        *:gap-2
        *:w-full
        *:justify-end
     sm:*:justify-center
        *:py-1
        *:px-3
        *:rounded-md
        *:text-sm
        *:cursor-pointer
        *:relative
        *:isolate
        *:overflow-hidden

        before:*:absolute
        before:*:inset-[0_100%_0_100%]
        before:*:m-auto
        before:*:bg-blue-100
        before:*:-z-10
        before:*:transition-all
        before:*:duration-300
        hover:before:*:inset-0
        
        peer-checked/option1:[&_#option-1-nav]:bg-white
        peer-checked/option1:[&_#option-1-nav>span]:rotate-180

        peer-checked/option2:[&_#option-2-nav]:bg-white
        peer-checked/option2:[&_#option-2-nav>span]:rotate-180

        peer-checked/option3:[&_#option-3-nav]:bg-white
        peer-checked/option3:[&_#option-3-nav>span]:rotate-180
        
        peer-checked/option4:[&_#option-4-nav]:bg-white
        peer-checked/option4:[&_#option-4-nav>span]:rotate-180
    ">
    <label for="option-1" id="option-1-nav">
      Products
      <span class="material-symbols-outlined material-fill-1">expand_more</span>
    </label>
    <label for="option-2" id="option-2-nav">
      Solutions
      <span class="material-symbols-outlined material-fill-1">expand_more</span>
    </label>
    <label for="option-3" id="option-3-nav">
      Resources
      <span class="material-symbols-outlined material-fill-1">expand_more</span>
    </label>
    <label for="option-4" id="option-4-nav">
      Pricing
      <span class="material-symbols-outlined material-fill-1">expand_more</span>
    </label>

  </nav>

  <main class="grid [grid-template-areas:'stack'] w-full max-w-3xl sm:p-10 pt-2 sm:pt-4    overflow-hidden
        *:[grid-area:stack]
        *:bg-white
        *:p-6
        sm:*:p-10
        sm:*:py-12
        sm:*:shadow-xl
        *:w-full
        *:overflow-hidden
        *:rounded-xl
        [&_*]:duration-500
        *:text-sm
        *:space-y-4
        [&_section]:-translate-x-[1000px]

        [&_h2]:uppercase
        [&_h2]:text-lg
        [&_h2]:font-semibold
        [&_h2]:duration-300
        [&_h2]:-translate-x-60

        [&>section>div]:grid
        [&>section>div]:grid-cols-1
        sm:[&>section>div]:grid-cols-2
        [&>section>div]:gap-2

        [&_button]:w-full
        [&_button]:text-left
        [&_button]:bg-gray-100Z
        [&_button]:rounded-lg
        [&_button]:py-3
        [&_button]:px-2
        [&_button]:flex
        [&_button]:gap-4
        [&_button]:isolate
        [&_button]:relative
        [&_button]:overflow-hidden
        [&_button]:scale-0
        [&_button]:transition-all
        [&_button]:duration-500
    
        before:[&_button]:absolute
        before:[&_button]:inset-[0_100%_0_0]
        before:[&_button:m-auto
        before:[&_button]:bg-blue-100
        before:[&_button]:-z-10
        before:[&_button]:transition-all
        before:[&_button]:duration-300
        hover:before:[&_button]:inset-0

        [&_h3]:
        [&_h3]:font-semibold
        [&_h3]:mb-2
        [&_p]:text-xs
        [&_p]:opacity-80
        [&_p]:line-clamp-3

        [&_span]:rounded-full
        [&_span]:w-10
        [&_span]:h-10
        [&_span]:grid
        [&_span]:place-content-center
        [&_span]:p-2
        
        [&_button:nth-of-type(1)>span]:bg-pink-100
       before:[&_button:nth-of-type(1)]:bg-pink-100

        [&_button:nth-of-type(2)>span]:bg-blue-100
        before:[&_button:nth-of-type(2)]:bg-blue-100

        [&_button:nth-of-type(3)>span]:bg-green-100
        before:[&_button:nth-of-type(3)]:bg-green-100

        [&_button:nth-of-type(4)>span]:bg-orange-100
        before:[&_button:nth-of-type(4)]:bg-orange-100

        peer-checked/option1:[&_#option-1-panel]:translate-x-0
        peer-checked/option1:[&_#option-1-panel]:duration-800
        peer-checked/option1:[&_#option-1-panel]:delay-500
        peer-checked/option1:[&_#option-1-panel_h2]:translate-x-0
        peer-checked/option1:[&_#option-1-panel_h2]:delay-[900ms]
        peer-checked/option1:[&_#option-1-panel_button]:scale-100
        peer-checked/option1:[&_#option-1-panel_button:nth-of-type(1)]:delay-[1300ms]
        peer-checked/option1:[&_#option-1-panel_button:nth-of-type(2)]:delay-[1600ms]
        peer-checked/option1:[&_#option-1-panel_button:nth-of-type(3)]:delay-[1900ms]
        peer-checked/option1:[&_#option-1-panel_button:nth-of-type(4)]:delay-[2100ms]

        peer-checked/option2:[&_#option-2-panel]:translate-x-0
        peer-checked/option2:[&_#option-2-panel]:duration-800
        peer-checked/option2:[&_#option-2-panel]:delay-500
        peer-checked/option2:[&_#option-2-panel_h2]:translate-x-0
        peer-checked/option2:[&_#option-2-panel_h2]:delay-[900ms]
        peer-checked/option2:[&_#option-2-panel_button]:scale-100
        peer-checked/option2:[&_#option-2-panel_button:nth-of-type(1)]:delay-[1300ms]
        peer-checked/option2:[&_#option-2-panel_button:nth-of-type(2)]:delay-[1600ms]
        peer-checked/option2:[&_#option-2-panel_button:nth-of-type(3)]:delay-[1900ms]
        peer-checked/option2:[&_#option-2-panel_button:nth-of-type(4)]:delay-[2100ms]

        peer-checked/option3:[&_#option-3-panel]:translate-x-0
        peer-checked/option3:[&_#option-3-panel]:duration-800
        peer-checked/option3:[&_#option-3-panel]:delay-500
        peer-checked/option3:[&_#option-3-panel_h2]:translate-x-0
        peer-checked/option3:[&_#option-3-panel_h2]:delay-[900ms]
        peer-checked/option3:[&_#option-3-panel_button]:scale-100
        peer-checked/option3:[&_#option-3-panel_button:nth-of-type(1)]:delay-[1300ms]
        peer-checked/option3:[&_#option-3-panel_button:nth-of-type(2)]:delay-[1600ms]
        peer-checked/option3:[&_#option-3-panel_button:nth-of-type(3)]:delay-[1900ms]
        peer-checked/option3:[&_#option-3-panel_button:nth-of-type(4)]:delay-[2100ms]
       
        peer-checked/option4:[&_#option-4-panel]:translate-x-0
        peer-checked/option4:[&_#option-4-panel]:duration-800
        peer-checked/option4:[&_#option-4-panel]:delay-500
        peer-checked/option4:[&_#option-4-panel_h2]:translate-x-0
        peer-checked/option4:[&_#option-4-panel_h2]:delay-[900ms]
        peer-checked/option4:[&_#option-4-panel_article]:scale-100
        peer-checked/option4:[&_#option-4-panel_article:nth-of-type(1)]:delay-[1300ms]
        peer-checked/option4:[&_#option-4-panel_article:nth-of-type(2)]:delay-[1600ms]
        peer-checked/option4:[&_#option-4-panel_article:nth-of-type(3)]:delay-[1900ms]
    ">
    <!-- products -->
    <section id="option-1-panel">
      <h2>Products</h2>

      <div>

        <button type="button">
          <span class="material-symbols-outlined">fiber_new</span>
          <div>
            <h3>iOnboardHere</h3>
            <p>A complete onboarding tool to guid your new recruit through the first few weeks.........完整代码请登录后点击上方下载按钮下载查看