Stoppuhr mit HTML-CSS und Javascript. Folgen Sie uns auf Instagram ... https://www.instagram.com/webstreet

Stoppuhr mit HTML-CSS und Javascript. Folgen Sie uns auf Instagram ... https://www.instagram.com/webstreet_code/

Patricia Arquette

Freigeben： 2024-11-11 01:56:02

Original

821 Leute haben es durchsucht

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

Folgen Sie uns auf Instagram: https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , Anfangsskalierung=1,0">
    <title>Stoppuhr</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<Stil>

    Körper{
        Anzeige: Flex;
        rechtfertigen-Inhalt: Mitte;
        align-items: center;
        Höhe: 100 Vh;
        Hintergrundfarbe: #282c34;
        Farbe: weiß;
        Schriftfamilie: Arial, Helvetica, serifenlos;
        Flexrichtung: Spalte;
    }

    .Uhr{
        Anzeige: Flex;
        Flexrichtung: Spalte;
        align-items: center;
        Rand unten: 20px;
    }
    .Zifferblatt {
            Breite: 300px;
            Höhe: 300px;
            Hintergrundfarbe: #282c34;
            Randradius: 50 %;
            Position: relativ;
            Kastenschatten: 0 0 40px 1px rgb(56, 56, 62);
        }
        .Hand {
            Breite: 36 %;
            Höhe: 4px;
            Hintergrund: #58f5db;
            Position: absolut;
            oben: 50 %;
            links: 11 %;
            Transformationsursprung: 100 %;
            transformieren: drehen (90 Grad);
            Übergangs-Timing-Funktion: Easy-in-out;
            Übergang: alle 0,05 s;
        }

        .aus zweiter Hand{
            Hintergrundfarbe: blau;
            Z-Index:1;
        }

        .Kreis {
            Höhe: 20px;
            Breite: 20px;
            Randradius: 50 %;
            Hintergrundfarbe: weiß;
            Position: absolut;
            oben: 48 %;
            links: 44 %;
            Z-Index: 0,8;
        }

        .inner-circle{
            Höhe: 10px;
            Breite: 10px;
            Randradius: 50 %;
            Hintergrundfarbe: blau;
            margin:auto;
            Rand oben: 5 Pixel
        }
        /* Uhrmarkierungen */
        .markings {
            Position: absolut;
            Breite: 100 %;
            Höhe: 100 %;
            Anzeige: Flex;
            rechtfertigen-Inhalt: Mitte;
            align-items: center;
            /* transform: TranslateY(-50%); */
        }

        .markings div {
            Position: absolut;
            Schriftgröße: 16px;
            transform: Translate(-50%, -50%);
        }

        .Tick{
            Breite: 2px;
            Höhe: 10px;
            Hintergrundfarbe:weiß;
            Position: absolut;
            Transformationsursprung: Mitte;
        }

        .digital {
            Schriftgröße: 24px;
            Position: absolut;
            oben: 20 %;
            Breite: 100 %;
            Textausrichtung: Mitte;
        }


        .buttons{
            Anzeige: Flex;
            Lücke: 20px;
        }
        ich{
            Schriftgröße: 40px;
            Cursor: Zeiger;
        }.fa-play{
            Hintergrundfarbe: blau;
            Polsterung: 10px;
            Randradius: 50 %;
        }
        .fa-stop{
          Farbe: rot;
          Schriftgröße: 45px
        }




        .fa-rotate-right{
            Rand: 8px;
            Rand links: 35px;
        }

</style>



















</head>
<Körper>

    <div>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonStoppuhr mit HTML-CSS und Javascript. Folgen Sie uns auf Instagram ... https://www.instagram.com/webstreet_code/. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!