Relógio Analógico:
Aprenda a construir um relógio analógico funcional com este tutorial detalhado.
Este projeto é muito bom pra quem está aprendendo linguagens de programação, principalmente nestas 3 linguagens: HTML, CSS e JavaScript.
Este projeto consiste em um Relógio Analógico lindo e eficaz, com algumas animações ele funciona perfeitamente.
Veja o Relógio Analógico em funcionamento neste link. Relógio Analógico.
Veja o vídeo no YouTube:
Começando o Tutorial:
1° Passo: Abra seu VS Code, ou qualquer IDE da sua preferência e crie três pastas com os nomes... index.html, style.css e script.js.
Logo em seguida copie o código html abaixo e cole na pasta "index.html".
<!DOCTYPE html>
<html lang="pt-br">
<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>Relógio Analógico</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box">
<div class="clock">
<span class="hour" id="h"></span>
<span class="min" id="m"></span>
<span class="sec" id="s"></span>
</div>
<div class="gradient">
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
* {
padding: 0;
margin: 0;
}
html {
font-size: 10px;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #d5dade;
overflow: hidden;
}
.container {
position: relative;
}
.container .box {
position: relative;
width: 51rem;
height: 51rem;
background: #d5dade;
box-shadow: 16px 16px 30px #bcbcbc, -8px -8px 20px #fafafa;
border-radius: 50%;
}
.container .box::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 49rem;
height: 49rem;
box-shadow: inset 8px 8px 20px rgba(0, 0, 0, 0.3),
inset -8px -8px 15px rgba(255, 255, 255, 1);
border-radius: 50%;
}
.container .box::after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 46rem;
height: 46rem;
background: #d5dade;
box-shadow: inset 8px 8px 25px rgba(0, 0, 0, 0.15),
inset -5px -5px 20px rgba(255, 255, 255, 1);
border-radius: 50%;
}
.container .box .gradient {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 48.5rem;
height: 48.5rem;
background: linear-gradient(#4694aa 95%, #B22222, #FFFF00, #000000);
border-radius: 50%;
animation: anime 6s ease-in-out infinite;
}
@keyframes anime {
0%,
100% {
transform: rotate(0);
background: linear-gradient(
#B22222 95%,
#B22222,
#FFFF00,
#000000
);
}
50% {
transform: rotate(360deg);
background: linear-gradient(
transparent 95%,
#B22222,
#FFFF00,
#000000
);
}
}
.container .box .clock {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 44rem;
height: 44rem;
background: url(https://i.ibb.co/xqcFrw6/time.png);
background-size: cover;
background-position: center;
z-index: 1;
box-shadow: 5px 5px 7px #bcbcbc, -3px -3px 5px #fafafa;
border-radius: 50%;
}
.container .box .clock::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 8rem;
height: 8rem;
background: #d5dade;
box-shadow: 8px 8px 15px #bcbcbc, -4px -4px 10px #fafafa;
border-radius: 50%;
}
.container .box .clock span {
position: absolute;
left: 0;
right: 0;
margin: auto;
transform-origin: bottom;
}
.container .box .clock .hour {
top: 12rem;
width: 0.8rem;
height: 10rem;
background: #000000;
border-radius: 30% 30% 0 0;
}
.container .box .clock .min {
top: 10rem;
width: 0.6rem;
height: 12rem;
background: #000000;
border-radius: 30% 30% 0 0;
}
.container .box .clock .sec {
top: 8rem;
width: 0.5rem;
height: 14rem;
background: #B22222;
border-radius: 30% 30% 0 0;
animation: sec 60s linear infinite;
}
@keyframes sec {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.container .box .clock .sec::before {
content: "";
position: absolute;
bottom: -6rem;
left: -0.3rem;
right: 0;
width: 1rem;
height: 6rem;
background: #B22222;
border-radius: 1rem;
}
.container .box .clock .sec::after {
content: "";
position: absolute;
bottom: -0.5rem;
left: -0.3rem;
right: 0;
width: 1rem;
height: 1rem;
background: #d5dade;
border-radius: 50%;
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
setInterval(() => {
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
hr = h * 30 + m / 2;
m = 6 * m;
s = 6 * s;
document.querySelector('#h').style.transform = `rotate(${hr}deg)`;
document.querySelector('#m').style.transform = `rotate(${m}deg)`;
document.querySelector('#s').style.transform = `rotate(${s}deg)`;
}, 1000);
Agora, com os três arquivos (index.html, style.css, e script.js) criados, você pode abrir o index.html no seu navegador e ver seu projeto funcionando perfeitamente!
Comentários
Postar um comentário
Obrigado pelo seu feedback!