検索

ホームページ  >  記事  >  ウェブフロントエンド  >  HTML CSS と JavaScript を使用したスト​​ップウォッチ Instagram でフォローしてください... https://www.instagram.com/webstreet_code/

HTML CSS と JavaScript を使用したスト​​ップウォッチ Instagram でフォローしてください... https://www.instagram.com/webstreet_code/

Patricia Arquette
Patricia Arquetteオリジナル
2024-11-11 01:56:02777ブラウズ

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

インスタグラムでフォローしてください: https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="ja">

    <メタ文字セット="UTF-8">
    <meta name="ビューポート" content="width=
    、初期スケール=1.0">
    <title>ストップウォッチ</title>
    <リンク rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">



    体{
        ディスプレイ: フレックス;
        コンテンツの位置揃え: 中央;
        整列項目: 中央;
        高さ: 100vh;
        背景色: #282c34;
        色:白;
        フォントファミリー: Arial、Helvetica、サンセリフ;
        フレックス方向: 列;
    }

    。クロック{
        ディスプレイ: フレックス;
        フレックス方向: 列;
        整列項目: 中央;
        マージン-ボトム: 20px;
    }
    .時計文字盤 {
            幅: 300ピクセル;
            高さ: 300ピクセル;
            背景色: #282c34;
            境界半径: 50%;
            位置: 相対的;
            ボックスシャドウ: 0 0 40px 1px rgb(56, 56, 62);
        }
        。手 {
            幅: 36%;
            高さ: 4px;
            背景: #58f5db;
            位置: 絶対;
            トップ: 50%;
            左：11％。
            変換元: 100%;
            変換: 回転(90度);
            遷移タイミング機能: イーズインアウト;
            トランジション: すべて 0.05 秒。
        }

        。中古{
            背景色: 青;
            z インデックス:1;
        }

        。丸 {
            高さ: 20ピクセル;
            幅: 20ピクセル;
            境界半径: 50%;
            背景色: 白;
            位置: 絶対;
            トップ: 48%;
            左: 44%;
            z インデックス: 0.8;
        }

        .inner-circ{
            高さ: 10ピクセル;
            幅: 10px;
            境界半径: 50%;
            背景色: 青;
            マージン:自動;
            マージントップ:5px
        }
        /* 時計のマーク */
        .markings {
            位置: 絶対;
            幅: 100%;
            高さ: 100%;
            ディスプレイ: フレックス;
            コンテンツの位置揃え: 中央;
            整列項目: 中央;
            /* 変換:translateY(-50%); */
        }

        .markings div {
            位置: 絶対;
            フォントサイズ: 16px;
            変換: 変換(-50%, -50%);
        }

        .tick{
            幅: 2px;
            高さ: 10ピクセル;
            背景色:白;
            位置: 絶対;
            変換原点: 中心;
        }

        .デジタル {
            フォントサイズ: 24px;
            位置: 絶対;
            トップ: 20%;
            幅: 100%;
            テキスト整列: 中央;
        }


        .ボタン{
            ディスプレイ: フレックス;
            ギャップ: 20px;
        }
        私{
            フォントサイズ: 40px;
            カーソル: ポインタ;
        }.fa-play{
            背景色: 青;
            パディング: 10px;
            境界半径: 50%;
        }
        .fa-ストップ{
          色: 赤;
          フォントサイズ:45px
        }




        .fa-rotate-right{
            マージン: 8px;
            マージン左: 35px;
        }

</スタイル>



















</head>


    <div>




          </div>

以上がHTML CSS と JavaScript を使用したスト​​ップウォッチ Instagram でフォローしてください... https://www.instagram.com/webstreet_code/の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript css ajax html auto using pointer function href display position margin padding border viewport background transform transition column flex https
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScript の `sort()` メソッドは数値の並べ替えにコールバック関数をどのように使用しますか?次の記事：JavaScript の `sort()` メソッドは数値の並べ替えにコールバック関数をどのように使用しますか?

関連記事

続きを見る