HTML 및 CSS를 사용하여 카운트다운 타이머 만들기
7835 단어 programmingcsswebdevhtml
Html🔥을 사용하여 카운트다운 타이머 프로젝트🤯의 기본 구조를 만들어 봅시다.
HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css Only Timer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Click 👇 to start/pause the timer</h2>
<input type="checkbox" id="go">
<label class="timer" for="go">
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
</label>
</body>
</html>
이것은 카운트다운 타이머 프로젝트의 HTML 코드입니다. 상용구 코드를 사용한 다음 css 파일을 링크하므로 다음 단계는 css 파일의 코드입니다. 그리고 입력 유형 확인란을 사용하여 타이머 시작 여부를 결정한 다음 레이블에서 일부 div를 사용하지 않을 수 있습니다. 따라서 이것은 Html을 사용하는 기본 코드 구조일 뿐입니다.
완전한 스타일링과 카운트다운을 위해 css 코드를 작성하는 것보다 Html 코드만으로 아래에 👀 출력이 표시됩니다.
HTML 출력
카운트다운 타이머 스타일을 위한 Css 코드를 작성해 봅시다
CSS 코드
@property --n {
syntax: "<integer>";
inherits: true;
initial-value: 0;
}
@property --t {
syntax: "<color>";
inherits: true;
initial-value: #000;
}
@property --r {
syntax: "<color>";
inherits: true;
initial-value: #000;
}
@property --b {
syntax: "<color>";
inherits: true;
initial-value: #000;
}
@property --l {
syntax: "<color>";
inherits: true;
initial-value: #000;
}
.d {
width: 77px; /* size */
display: inline-grid;
aspect-ratio: 0.55;
}
.d:before,
.d:after {
content: "";
padding: 20%;
background: conic-gradient(from -45deg at 50% 45%, var(--t) 90deg, #0000 0),
conic-gradient(from 45deg at 55% 50%, var(--r) 90deg, #0000 0),
conic-gradient(from 135deg at 50% 55%, var(--b) 90deg, #0000 0),
conic-gradient(from 225deg at 45% 50%, var(--l) 90deg, #0000 0);
--m: conic-gradient(#000 0 0) content-box, conic-gradient(#000 0 0);
-webkit-mask: var(--m);
mask: var(--m);
-webkit-mask-composite: xor;
mask-composite: exclude;
clip-path: polygon(
25% 0,
75% 0,
100% 25%,
100% 75%,
75% 100%,
25% 100%,
0 75%,
0 25%
);
transition: --t 0.45s, --l 0.45s, --b 0.45s, --r 0.45s;
}
.d:after {
margin-top: -20%;
--t: #0000;
}
.d {
--1: (var(--n) - 1) * (var(--n) - 1);
--2: (var(--n) - 2) * (var(--n) - 2);
--3: (var(--n) - 3) * (var(--n) - 3);
--4: (var(--n) - 4) * (var(--n) - 4);
--5: (var(--n) - 5) * (var(--n) - 5);
--6: (var(--n) - 6) * (var(--n) - 6);
--7: (var(--n) - 7) * (var(--n) - 7);
--8: (var(--n) - 8) * (var(--n) - 8);
--9: (var(--n) - 9) * (var(--n) - 9);
}
.d:before {
--t: rgb(
clamp(30, var(--1) * var(--4) * 999, 250)
clamp(30, var(--1) * var(--4) * 999, 250) 30
);
--r: rgb(
clamp(30, var(--5) * var(--6) * 999, 250)
clamp(30, var(--5) * var(--6) * 999, 250) 30
);
--b: rgb(
clamp(30, var(--n) * var(--1) * var(--7) * 999, 250)
clamp(30, var(--n) * var(--1) * var(--7) * 999, 250) 30
);
--l: rgb(
clamp(30, var(--1) * var(--2) * var(--3) * var(--7) * 999, 250)
clamp(30, var(--1) * var(--2) * var(--3) * var(--7) * 999, 250) 30
);
}
.d:after {
--r: rgb(clamp(30, var(--2) * 999, 250) clamp(30, var(--2) * 999, 250) 30);
--b: rgb(
clamp(30, var(--1) * var(--4) * var(--7) * 999, 250)
clamp(30, var(--1) * var(--4) * var(--7) * 999, 250) 30
);
--l: rgb(
clamp(
30,
var(--1) * var(--3) * var(--4) * var(--5) * var(--7) * var(--9) * 999,
250
)
clamp(
30,
var(--1) * var(--3) * var(--4) * var(--5) * var(--7) * var(--9) * 999,
250
)
30
);
}
.timer .d:nth-child(1) {
animation: d6 3600s linear infinite;
}
.timer .d:nth-child(2) {
animation: d9 600s linear infinite;
}
.timer .d:nth-child(3) {
animation: d6 60s linear infinite;
grid-column: 4;
}
.timer .d:nth-child(4) {
animation: d9 10s linear infinite;
}
@keyframes d9 {
0%,
9.95% {
--n: 0;
}
10%,
19.95% {
--n: 1;
}
20%,
29.95% {
--n: 2;
}
30%,
39.95% {
--n: 3;
}
40%,
49.95% {
--n: 4;
}
50%,
59.95% {
--n: 5;
}
60%,
69.95% {
--n: 6;
}
70%,
79.95% {
--n: 7;
}
80%,
89.95% {
--n: 8;
}
90%,
99.95% {
--n: 9;
}
}
@keyframes d6 {
0%,
16.64% {
--n: 0;
}
16.67%,
33.30% {
--n: 1;
}
33.33%,
49.96% {
--n: 2;
}
50.00%,
66.63% {
--n: 3;
}
66.67%,
83.30% {
--n: 4;
}
83.33%,
99.97% {
--n: 5;
}
}
.timer {
display: grid;
cursor: pointer;
grid-template-columns: 1fr 1fr 15px 1fr 1fr;
grid-gap: 15px;
background: linear-gradient(rgb(250 250 30) 0 0) 50% 30%/15px 15px no-repeat,
linear-gradient(rgb(250 250 30) 0 0) 50% 70%/15px 15px no-repeat;
}
#go {
display: none;
}
#go ~ .timer .d {
animation-play-state: paused;
}
#go:checked ~ .timer .d {
animation-play-state: running;
}
#go:checked ~ .timer {
filter: hue-rotate(45deg);
}
body {
margin: 0;
height: 100vh;
display: grid;
place-content: center;
background: #000;
}
h2 {
color: #fff;
font-family: sans-serif;
margin: 0 auto 20px;
}
이것이 카운트다운 프로젝트를 위한 긴 Css 코드입니다. 우리는 css 코드 @property에서 많은 새로운 선택자를 사용합니다. 우리는 종횡비, 이전, 이후, 마스크 태그 및 많은 새로운 것들을 사용합니다. 그런 다음 클램프를 사용합니다(이것은 자바스크립트에 함수가 있는 것처럼 CSS에 있는 함수입니다). 그런 다음 nth-child 선택자를 사용하여 모든 div를 레이블로 지정합니다. 그런 다음 키프레임 애니메이션을 사용하여 카운트다운 프로젝트를 시작하십시오.
최종 출력
이 출력👆을 볼 수 있고 타이머를 클릭할 때 타이머가 시작되고 타이머 일시 중지를 다시 클릭할 때 카운트다운 타이머 프로젝트가 어떻게 작동하는지 이해할 수 있습니다. 타이머 색상은 노란색이지만 타이머를 시작하면 녹색입니다. 이것이 Html Css 카운트다운 타이머 프로젝트 코드의 전부입니다.
이 프로젝트가 마음에 드셨기를 바라며, 이 프로젝트를 리뷰 섹션 및 연락처 양식과 같은 일부 프로젝트로 모든 프로젝트에서 직접 만들고 사용합니다. 프로젝트 관련 프런트엔드가 더 필요한 경우. 홈페이지를 방문하면 100개 이상의 프로젝트💝를 얻을 수 있습니다.
혼란이 있는 경우 아래에 의견을 말하거나 홈 섹션에서 문의 양식을 작성하여 문의할 수 있습니다. 🤞🎉
코드 작성자 – @t_afif
작성자 – Codewithrandom
일부 관련 주제 -
countdown-timer-html-css
responsive-carousel-slider-using-html-css-jquery
page-flip-animation-css-page-flip-using-html-css
hidden-search-bar-hidden-search-bar-html-css-javascript
Reference
이 문제에 관하여(HTML 및 CSS를 사용하여 카운트다운 타이머 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codingtitan6/create-a-countdown-timer-using-html-css-3351텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
