tailwind实现带入场动画渐显的tab选项卡切换代码
代码语言:html
所属分类:选项卡
代码描述:tailwind实现带入场动画渐显的tab选项卡切换代码
代码标签: 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-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0