tailwind布局实现消息列表切换交互动画效果代码-html代码-BFW代码库

tailwind布局实现消息列表切换交互动画效果代码

代码语言：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.3.3.js"></script>
         <link rel="stylesheet"  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  
  
  
<style>
.material-fill-1 {
    font-variation-settings:
        'FILL'1,
        'wght'400,
        'GRAD'0,
        'opsz'48
}
</style>

  
  
</head>

  <body class="bg-gradient-to-tr  from-indigo-200 from-indigo-300 text-gray-400 flex flex-col gap-4 justify-center items-center min-h-screen
        [&_*]:transition-all
        [&_*]:duration-500
        [&_*]:ease-in-out
    ">
  <input class="peer/option1 sr-only" id="option-1" type="radio" name="panel" />
  <input class="peer/option2 sr-only" id="option-2" type="radio" name="panel" checked />

  <header class="flex items-center gap-2 justify-end w-72 sm:w-96
            [&>label]:bg-blue-50
            [&>label]:text-blue-300
            [&>label]:rounded-full
            [&>label]:grid
            [&>label]:place-content-center
            [&>label]:w-16
            sm:[&>label]:w-20
            [&>label]:aspect-square
            [&>label]:cursor-pointer
            [&>label]:text-3xl
            [&>label]:relative
            [&>label]:isolate
            before:[&>label]:content-[attr(data-alerts)]
            before:[&>label]:absolute
            before:[&>label]:font-sans
            before:[&>label]:top-0
            before:[&>label]:-right-3
            before:[&>label]:text-green-500
            before:[&>label]:w-10
            before:[&>label]:h-6
            before:[&>label]:rounded-full
            before:[&>label]:bg-white
            before:[&>label]:text-xs
            before:[&>label]:grid
            before:[&>label]:place-content-center
            after:[&>label]:bg-blue-400
            after:[&>label]:absolute
            after:[&>label]:inset-0
            after:[&>label]:m-auto
            after:[&>label]:rounded-full
            after:[&>label]:-z-10
            after:[&>label]:scale-0
            after:[&>label]:transition-all
            after:[&>label]:duration-300
            hover:after:[&>label]:scale-50
            hover:[&>label]:text-white
            peer-checked/option1:after:[&>label.option-1]:scale-100
            peer-checked/option1:[&>label.option-1]:text-white
            peer-checked/option2:after:[&>label.option-2]:scale-100
            peer-checked/option2:[&>label.option-2]:text-white
        ">
    <label for="option-1" class="option-1 material-symbols-outlined material-fill-1" data-alerts="17">chat</label>
    <label for="option-2" class="option-2 material-symbols-outlined material-fill-1" data-alerts="97">notifications</label>
  </header>

  <main class="grid [grid-template-areas:'stack'] bg-white rounded-md  w-72 sm:w-96  shadow-xl shadow-blue-300 relative isolate
            before:absolute
            before:bg-blue-100
            before:w-4
            before:aspect-square
            before:right-8
            before:-top-2
            before:rotate-45
            before:transition-all
            before:duration-300
            peer-checked/option1:before:right-[7.5rem]
            [&>section]:[grid-area:stack]
            [&>section>article]:overflow-hidden
            [&>section>article>div]:delay-300-X
            [&_h2]:bg-blue-100
            [&_h2]:p-4
            sm:[&_h2]:p-6
            [&_h2]:text-center
            [&_h2]:text-blue-400
            [&_h2]:uppercase
            [&_h2]:rounded-t-md
            [&_h2]:
            [&_h2>span]:block
            [&>section>article>div]:flex
            [&>section>article>div]:items-center
            [&>section>article>div]:gap-4
            [&>section>article>div]
            [&>section>article>div]:py-3
            sm:[&>section>arti.........完整代码请登录后点击上方下载按钮下载查看