Css menu animation - v0 by Vercel

以下のコードの中のiconを添付に変更してください。ーーーー<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSSメニューアニメーション</title> <style> body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; font-family: sans-serif; background-color: #f0f0f0; overflow: hidden; /* メニューが画面外にあるときにスクロールバーが出ないように / } .menu-container { position: relative; width: 80px; / メインボタンの幅 / height: 80px; / メインボタンの高さ / display: flex; justify-content: center; align-items: center; } / 新しい背景要素のスタイル / .menu-background { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #013d96; / ★ここをボタンと同じ色に変更しました / border-radius: 40px; / 角丸の半径 / width: 80px; / 初期幅はメインボタンと同じ / height: 80px; / 初期高さはメインボタンと同じ / transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); / アニメーション / z-index: 1; / メインボタンより奥に配置 / box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .menu-container.active .menu-background { width: 400px; / 開いたときの背景の幅（適宜調整） / height: 100px; / 開いたときの背景の高さ（適宜調整） / border-radius: 50px; / 開いたときの角丸の半径（適宜調整） / } .main-button { width: 60px; height: 60px; background-color: #013d96; / メインボタンの背景色 / border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 10; / 他のアイコンより手前に表示 / transition: transform 0.3s ease; } .main-button.active { transform: rotate(45deg); / 開いたときに回転させる例 / } .main-button span { color: white; font-size: 24px; font-weight: bold; } .sub-icon { position: absolute; width: 50px; height: 50px; background-color: #e0aa28; / サブアイコンの色 / border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; font-size: 20px; opacity: 0; pointer-events: none; / 非表示時はクリックイベントを無効化 / transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); / バウンドするようなアニメーション / z-index: 5; } / 各アイコンの位置 / .sub-icon.left-1 { left: 50%; / 初期位置はメインボタンと同じ中央 / transform: translate(-50%, 0); } .sub-icon.right-1 { right: 50%; / 初期位置はメインボタンと同じ中央 / transform: translate(50%, 0); } / activeクラスが付与されたときのアニメーション / .menu-container.active .sub-icon { opacity: 1; pointer-events: auto; / 表示時はクリックイベントを有効化 / } .menu-container.active .sub-icon.left-1 { transform: translate(calc(-50% - 80px), 0); / 左へ移動 / } .menu-container.active .sub-icon.right-1 { transform: translate(calc(50% + 80px), 0); / 右へ移動 / } / アイコンのコンテンツ（例: Font Awesomeなどを使う場合は変更） / .sub-icon.left-1::before { content: 'A'; } / 仮のアイコン / .sub-icon.right-1::before { content: 'B'; } / 仮のアイコン / / 2つ以上アイコンを増やす場合 / .sub-icon.left-2 { left: 50%; transform: translate(-50%, 0); transition-delay: 0.05s; / 少し遅れて出現 / } .menu-container.active .sub-icon.left-2 { transform: translate(calc(-50% - 150px), 0); / さらに左へ / } .sub-icon.left-2::before { content: 'C'; } .sub-icon.right-2 { right: 50%; transform: translate(50%, 0); transition-delay: 0.05s; / 少し遅れて出現 / } .menu-container.active .sub-icon.right-2 { transform: translate(calc(50% + 150px), 0); / さらに右へ */ } .sub-icon.right-2::before { content: 'D'; } </style></head><body> <div class="menu-container" id="menuContainer"> <div class="menu-background"></div> <div class="main-button" id="mainButton"> <span>+</span> </div> <div class="sub-icon left-1"></div> <div class="sub-icon right-1"></div> <div class="sub-icon left-2"></div> <div class="sub-icon right-2"></div> </div> <script> const mainButton = document.getElementById('mainButton'); const menuContainer = document.getElementById('menuContainer'); mainButton.addEventListener('click', () => { menuContainer.classList.toggle('active'); mainButton.classList.toggle('active'); // メインボタン自身のスタイル変更用 }); </script></body></html>

Show full message