代码

"use client";
import React, { useState } from "react";
const Navbar = () => {
  const [isOpen, setIsOpen] = useState(true);
  const toggleNavbar = () => {
    setIsOpen(!isOpen);
  };
  return (
    <nav
      className={`duration-800 fixed bottom-0 left-1/2 flex 
        w-1/2 -translate-x-1/2 transform items-center justify-between rounded-2xl bg-gray-800 p-4 text-white transition-all ${isOpen ? "h-16" : "h-16 w-fit"}`}
    >
      <div className={`flex space-x-4 ${isOpen ? "" : "hidden"}`}>
        <button className="rounded-full bg-blue-500 p-2 hover:bg-blue-600 focus:outline-none">
          <svg
            className="h-6 w-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M5 13l4 4L19 7"
            ></path>
          </svg>
        </button>
        <button className="rounded-full bg-blue-500 p-2 hover:bg-blue-600 focus:outline-none">
          <svg
            className="h-6 w-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M5 13l4 4L19 7"
            ></path>
          </svg>
        </button>
        <button className="rounded-full bg-blue-500 p-2 hover:bg-blue-600 focus:outline-none">
          <svg
            className="h-6 w-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M5 13l4 4L19 7"
            ></path>
          </svg>
        </button>
      </div>
      <div className={`flex space-x-4 ${isOpen ? "" : "hidden"}`}>
        <button className="rounded-full bg-blue-500 p-2 hover:bg-blue-600 focus:outline-none">
          <svg
            className="h-6 w-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M5 13l4 4L19 7"
            ></path>
          </svg>
        </button>
        <button className="rounded-full bg-blue-500 p-2 hover:bg-blue-600 focus:outline-none">
          <svg
            className="h-6 w-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M5 13l4 4L19 7"
            ></path>
          </svg>
        </button>
      </div>
      <button
        className="rounded-full bg-blue-500 p-2 hover:bg-blue-600 focus:outline-none"
        onClick={toggleNavbar}
      >
        <svg
          className="h-6 w-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d={isOpen ? "M19 9l-7 7-7-7" : "M4 9l7 7 7-7"}
          ></path>
        </svg>
      </button>
    </nav>
  );
};
export default Navbar;

演示

打开导航栏：

关闭导航栏：

优化-新增放大效果

接下来在图标上加入一个鼠标悬停时放大的效果。

"use client";
import React, { useState } from "react";
const Navbar = () => {
  const [isOpen, setIsOpen] = useState(true);
  const toggleNavbar = () => {
    setIsOpen(!isOpen);
  };
  return (
    <nav
      className={`fixed bottom-0 left-1/2 flex w-1/2 -translate-x-1/2 transform items-center justify-between rounded-2xl bg-gray-800 p-4 text-white transition duration-700 ease-in-out ${isOpen ? "h-16" : "h-16 w-fit"}`}
    >
      <div className={`flex space-x-4 transition-opacity duration-700 ease-in-out ${isOpen ? "opacity-100" : "opacity-0"}`}>
        {Array.from({ length: 5 }).map((_, index) => (
          <button
            key={index}
            className="rounded-full bg-blue-500 p-2 hover:bg-blue-600 focus:outline-none transform transition-transform duration-200 hover:scale-125"
          >
            <svg
              className="h-6 w-6"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M5 13l4 4L19 7"
              ></path>
            </svg>
          </button>
        ))}
      </div>
      <button
        className="rounded-full bg-blue-500 p-2 hover:bg-blue-600 focus:outline-none"
        onClick={toggleNavbar}
      >
        <svg
          className="h-6 w-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d={isOpen ? "M19 9l-7 7-7-7" : "M4 9l7 7 7-7"}
          ></path>
        </svg>
      </button>
    </nav>
  );
};
export default Navbar;

1. 添加过渡效果：
   • 将鼠标悬停效果添加在按钮的className中：transform transition-transform duration-200 hover:scale-125。
   • transform 和 transition-transform 用于开启变换和过渡效果。
   • duration-200 设置了过渡效果的持续时间为200毫秒。
   • hover:scale-125 设置了悬停时的放大比例为1.25倍。