HTML CSS와 자바스크립트를 사용하는 스톱워치는 인스타그램에서 우리를 팔로우하세요... https://www.instagram.com/webstreet

HTML CSS와 자바스크립트를 사용하는 스톱워치는 인스타그램에서 우리를 팔로우하세요... https://www.instagram.com/webstreet_code/

Patricia Arquette

풀어 주다： 2024-11-11 01:56:02

원래의

818명이 탐색했습니다.

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="ko">
<머리>
    <meta charset="UTF-8">
    <메타 이름="뷰포트" 콘텐츠="너비=
    , 초기 규모=1.0">
    <title>스톱워치</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<스타일>

    몸{
        디스플레이: 플렉스;
        내용 정당화: 센터;
        항목 정렬: 중앙;
        높이: 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%;
            변환: 회전(90deg);
            전환 타이밍 기능: easy-in-out;
            전환: 모두 0.05초;
        }

        .중고{
            배경색: 파란색;
            Z-색인:1;
        }

        .원 {
            높이: 20px;
            너비: 20px;
            테두리 반경: 50%;
            배경색: 흰색;
            위치: 절대;
            최고: 48%;
            왼쪽: 44%;
            z-지수: 0.8;
        }

        .내부 원{
            높이: 10px;
            너비: 10px;
            테두리 반경: 50%;
            배경색: 파란색;
            여백:자동;
            여백 상단:5px
        }
        /* 시계 표시 */
        .markings {
            위치: 절대;
            너비: 100%;
            높이: 100%;
            디스플레이: 플렉스;
            내용 정당화: 센터;
            항목 정렬: 중앙;
            /* 변환: 번역Y(-50%); */
        }

        .markings div {
            위치: 절대;
            글꼴 크기: 16px;
            변환: 변환(-50%, -50%);
        }

        .진드기{
            너비: 2px;
            높이: 10px;
            배경색:흰색;
            위치: 절대;
            변형원점: 중심;
        }

        .디지털 {
            글꼴 크기: 24px;
            위치: 절대;
            최고: 20%;
            너비: 100%;
            텍스트 정렬: 중앙;
        }


        .버튼{
            디스플레이: 플렉스;
            간격: 20px;
        }
        나{
            글꼴 크기: 40px;
            커서: 포인터;
        }.fa-플레이{
            배경색: 파란색;
            패딩: 10px;
            테두리 반경: 50%;
        }
        .fa-스톱{
          색상: 빨간색;
          글꼴 크기:45px
        }




        .fa-회전-오른쪽{
            여백: 8px;
            왼쪽 여백: 35px;
        }

</스타일>



















</머리>
<본문>

    <div>

로그인 후 복사

위 내용은 HTML CSS와 자바스크립트를 사용하는 스톱워치는 인스타그램에서 우리를 팔로우하세요... https://www.instagram.com/webstreet_code/의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!