使用 html css 和 javascript 的智慧螢幕動畫

    
    
    <title>智慧螢幕選單</title>
    
        身體 {
            顯示：柔性；
            調整內容：居中；
            對齊項目：居中；
            高度：100vh；
            背景顏色：#1c1c1e；
            保證金：0；
            溢出：隱藏；
        }

        .菜單容器{
            位置：相對；
            寬度：250px；
            高度：250 像素；
        }

        .背景圓{
            位置：絕對；
            頂部：50%；
            左：50%；
            變換：平移（-50%，-50%）縮放（0）；
            寬度：200px；
            高度：200px；
            背景顏色：#ffffff30；
            邊界半徑：50%；
            過渡：變換0.4s緩出；
        }

        .center-btn {
            位置：絕對；
            頂部：50%；
            左：50%；
            變換：翻譯（-50%，-50%）；
            寬度：60 像素；
            高度：60 像素；
            背景顏色：#009688； /* 青色 */
            邊界半徑：50%；
            顯示：柔性；
            調整內容：居中；
            對齊項目：居中；
            顏色：#ffffff；
            字體大小：24px；
            遊標：指針；
            過渡：變換 0.3s 緩動，背景顏色 0.3s 緩動；
        }

        .center-btn.open-icon::之前{
            內容： '？ '; /* 展開圖示 */
        }

        .center-btn.close-icon::之前{
            內容： '？ '; /* 折疊圖示 */
        }

        .center-btn:懸停{
            變換：平移（-50%，-50%）縮放（1.1）；
            背景顏色：#00695c；
        }

        。選項 {
            位置：絕對；
            頂部：50%；
            左：50%；
            變換：平移（-50%，-50%）縮放（0）；
            寬度：50px；
            高度：50px；
            背景顏色：#2c2c2e；
            邊界半徑：50%；
            顯示：柔性；
            調整內容：居中；
            對齊項目：居中；
            顏色：#aaa；
            字體大小：18px；
            遊標：指針；
            不透明度：0；
            過渡：全部 0.4s 緩和；
        }

        .option.selected {
            背景顏色：#ffdd59；
            顏色：#000；
        }

        .option.selected::之前{
            內容： '';
            位置：絕對；
            上：-15px；
            顯示：塊；
            寬度：5px；
            高度：5px；
            背景顏色：#ffdd59；
            邊界半徑：50%；
        }.option.selected::after {
            內容： '';
            位置：絕對；
            上：-8px；
            寬度：15 像素；
            高度：3px；
            背景顏色：#ffdd59；
            變換：翻譯（-3px，10px）；
        }

        .選項：懸停{
            背景顏色：#ffd93d；
            顏色：#000；
        }

        /* 外圓和從中心開始的動畫 */
        .menu-container.open .background-circle {
            變換：平移（-50%，-50%）縮放（1）；
        }

        .menu-container.open .option {
            不透明度：1；
            指針事件：全部；
        }

        /* 圖示的單獨位置 */
        .brightness { 變換：翻譯(-50%, -50%) 翻譯(-100px, 0); }
        .wifi { 變換：翻譯（-50%，-50%） 翻譯（-70px，-70px）; }
        .airplane { 變換：翻譯(-50%, -50%) 翻譯(0, -100px); }
        .bluetooth { 變換：翻譯（-50%，-50%） 翻譯（70px，-70px）; }
        .flashlight { 變換：翻譯(-50%, -50%) 翻譯(100px, 0); }
        .location { 變換：翻譯(-50%, -50%) 翻譯(70px, 70px); }
        .dnd { 變換：翻譯(-50%, -50%) 翻譯(0, 100px); }
        .screenshot { 變換：翻譯(-50%, -50%) 翻譯(-70px, 70px); }

        .menu-container.open .brightness { 變換：翻譯(-50%, -50%) 翻譯(-100px, 0) 縮放(1); }
        .menu-container.open .wifi { 變換：翻譯（-50%，-50%） 翻譯（-70px，-70px） 縮放（1）; }
        .menu-container.open .airplane { 變換：翻譯(-50%, -50%) 翻譯(0, -100px) 縮放(1); }
        .menu-container.open .bluetooth { 變換：翻譯（-50%，-50%） 翻譯（70px，-70px） 縮放（1）; }
        .menu-container.open .flashlight { 變換：翻譯(-50%, -50%) 翻譯(100px, 0) 縮放(1); }
        .menu-container.open .location { 變換：翻譯(-50%, -50%) 翻譯(70px, 70px) 縮放(1); }
        .menu-container.open .dnd { 變換：翻譯(-50%, -50%) 翻譯(0, 100px) 縮放(1); }
        .menu-container.open .screenshot { 變換：翻譯(-50%, -50%) 翻譯(-70px, 70px) 縮放(1); }
    風格>
頭>

    <div>




          </div>

            
        

以上是使用 html css 和 javascript 的智慧螢幕動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！