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