首頁 web前端 js教程 使用 html css 和 javascript 的秒錶在 instagram 上關注我們... https://www.instagram.com/webstreet_code/

使用 html css 和 javascript 的秒錶在 instagram 上關注我們... https://www.instagram.com/webstreet_code/

Nov 11, 2024 am 01:56 AM

Stopwatch using html css and javascript follow us on the instagram... https://www.instagram.com/webstreet_code/

在 Instagram 上追蹤我們:https://www.instagram.com/webstreet_code/




    
    
    秒錶標題>
    



    身體{
        顯示:柔性;
        調整內容:居中;
        對齊項目:居中;
        高度:100vh;
        背景顏色:#282c34;
        顏色:白色;
        字型系列:Arial、Helvetica、sans-serif;
        彎曲方向:列;
    }

    。鐘{
        顯示:柔性;
        彎曲方向:列;
        對齊項目:居中;
        下邊距:20px;
    }
    .鐘面{
            寬度:300px;
            高度:300px;
            背景顏色:#282c34;
            邊界半徑:50%;
            位置:相對;
            框陰影: 0 0 40px 1px rgb(56, 56, 62);
        }
        。手 {
            寬度:36%;
            高度:4px;
            背景:#58f5db;
            位置:絕對;
            頂部:50%;
            左:11%;
            變換源:100%;
            變換:旋轉(90度);
            轉換計時功能:緩入緩出;
            過渡:全部0.05s;
        }

        。二手{
            背景顏色:藍色;
            z 索引:1;
        }

        。圓圈 {
            高度:20px;
            寬度:20px;
            邊界半徑:50%;
            背景顏色:白色;
            位置:絕對;
            頂部:48%;
            左:44%;
            z 指數:0.8;
        }

        .內圓{
            高度:10px;
            寬度:10px;
            邊界半徑:50%;
            背景顏色:藍色;
            邊距:自動;
            上邊距:5px
        }
        /* 時鐘標記 */
        .標記{
            位置:絕對;
            寬度:100%;
            高度:100%;
            顯示:柔性;
            調整內容:居中;
            對齊項目:居中;
            /* 變換:translateY(-50%); */
        }

        .markings div {
            位置:絕對;
            字體大小:16px;
            變換:翻譯(-50%,-50%);
        }

        。打鉤{
            寬度:2px;
            高度:10px;
            背景顏色:白色;
            位置:絕對;
            變換原點:中心;
        }

        。數位的 {
            字體大小:24px;
            位置:絕對;
            頂部:20%;
            寬度:100%;
            文字對齊:居中;
        }


        .按鈕{
            顯示:柔性;
            間隙:20px;
        }
        我{
            字體大小:40px;
            遊標:指針;
        }.fa-play{
            背景顏色:藍色;
            內邊距:10px;
            邊界半徑:50%;
        }
        .fa-停止{
          顏色: 紅色;
          字體大小:45px
        }




        .fa-向右旋轉{
            邊距:8px;
            左邊距:35px;
        }

風格>



















頭>


    <div>




          </div>

            
        
登入後複製

以上是使用 html css 和 javascript 的秒錶在 instagram 上關注我們... https://www.instagram.com/webstreet_code/的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

在JavaScript中替換字符串字符 在JavaScript中替換字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替換字符串字符

自定義Google搜索API設置教程 自定義Google搜索API設置教程 Mar 04, 2025 am 01:06 AM

自定義Google搜索API設置教程

示例顏色json文件 示例顏色json文件 Mar 03, 2025 am 12:35 AM

示例顏色json文件

8令人驚嘆的jQuery頁面佈局插件 8令人驚嘆的jQuery頁面佈局插件 Mar 06, 2025 am 12:48 AM

8令人驚嘆的jQuery頁面佈局插件

10個jQuery語法熒光筆 10個jQuery語法熒光筆 Mar 02, 2025 am 12:32 AM

10個jQuery語法熒光筆

什麼是這個&#x27;在JavaScript? 什麼是這個&#x27;在JavaScript? Mar 04, 2025 am 01:15 AM

什麼是這個&#x27;在JavaScript?

構建您自己的Ajax Web應用程序 構建您自己的Ajax Web應用程序 Mar 09, 2025 am 12:11 AM

構建您自己的Ajax Web應用程序

10 JavaScript和JQuery MVC教程 10 JavaScript和JQuery MVC教程 Mar 02, 2025 am 01:16 AM

10 JavaScript和JQuery MVC教程

See all articles