要素のアニメーション

ハンバーガーメニューのボタン

これはアニメーション付きのハンバーガーメニューボタンの例です。

HTML (React.js)

"use client";
import React, { useState } from "react";

const Hamburger = () => {
  const [open, setOpen] = useState(false);
  return (
    <button
      title="Menu"
      type="button"
      className="focus:outline-none h-10 w-fit p-1"
      onClick={() => setOpen(!open)}>
      <div
        data-menu-open={open}
        className="menu-toggle before:bg-black after:bg-black dark:before:bg-white dark:after:bg-white"></div>
    </button>
  );
};

export default Hamburger;

CSS

.menu-toggle {
  position: relative;
  width: 24px;
  height: 2px;
  background: transparent;
  transition: all 0.3s ease-in-out;
}
.menu-toggle:hover {
  cursor: pointer;
  background: transparent;
}

.menu-toggle::before,
.menu-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  transition: all 0.3s ease-in-out;
}

.menu-toggle::before {
  top: 0;
  transform: translateY(-5px);
}

.menu-toggle::after {
  bottom: 0;
  transform: translateY(5px);
}

.menu-toggle[data-menu-open="true"] {
  background: transparent;
}

.menu-toggle[data-menu-open="true"]::before {
  transform: rotate(45deg);
  top: 0;
}

.menu-toggle[data-menu-open="true"]::after {
  transform: rotate(-45deg);
  bottom: 0;
}

ドロップダウン

これはアニメーション付きのハンバーガーメニューボタンの例です。

ソースコードは後公開します。