Animación del reloj

1880 Andev.web

Abrir en el editor Publica tu código

Recomendado

23 June 2025

Navegación de la barra lateral HTML del panel de control de OMIC EST

18 September 2024

Botón de inicio de sesión

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bungee+Spice&display=swap" rel="stylesheet">
</head>

<span style="--i:1;"><b>1</b></span>
      <span style="--i:2;"><b>2</b></span>
      <span style="--i:3;"><b>3</b></span>
      <span style="--i:4;"><b>4</b></span>
      <span style="--i:5;"><b>5</b></span>
      <span style="--i:6;"><b>6</b></span>
      <span style="--i:7;"><b>7</b></span>
      <span style="--i:8;"><b>8</b></span>
      <span style="--i:9;"><b>9</b></span>
      <span style="--i:10;"><b>10</b></span>
      <span style="--i:11;"><b>11</b></span>
      <span style="--i:12;"><b>12</b></span>

<div class="digital-time-wrap">
        <div id="digital-time">
          <div id="hours">00</div>
          <div id="minuts">00</div>
          <div id="seconds">00</div>
          <div id="ampm">PM</div>
        </div>
      </div>
    </div>
  </div>
</body>
  <script  src="./script.js"></script>

</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
}
html {
  overflow-x: hidden;
}
body {
  background: #434343;
  width: 100%;
  height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Bungee Spice", sans-serif;
  overflow-x: hidden;
  min-height: 480px;
}
.container {
  position: relative;
  min-height: 250px;
}
.bubble-wrap {
  width: 350px;
  height: 350px;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.bubbles-bg {
  position: relative;
  height: 100%;
  display: flex;
  gap: 22px;
  justify-content: center;
  width: 100%;
}
.bubbles-bg span {
  display: inline-block;
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: animate 5s linear infinite;
  animation-duration: calc(150s / var(--i));
}
@keyframes animate {
  0% {
    transform: translateY(350px) scale(0);
    background-color: #df6208;
    box-shadow: 0px 0px 4px 4px #e67d31, 0 0 30px #e67d31, 0 0 70px #e67d31;
  }
  50% {
    background: #d3df08;
    box-shadow: 0px 0px 4px 4px #e4ec53, 0 0 30px #e4ec53, 0 0 70px #e4ec53;
  }
  70% {
    background: #df0808;
    box-shadow: 0px 0px 4px 4px #ec4242, 0 0 30px #ec4242, 0 0 70px #ec4242;
  }
  100% {
    transform: translateY(-10px) scale(1);
    background-color: #df6208;
    box-shadow: 0px 0px 4px 4px #e67d31, 0 0 30px #e67d31, 0 0 70px #e67d31;
  }
}
.clock {
  width: 350px;
  height: 350px;
  border-radius: 50%;
  position: relative;
  -webkit-box-shadow: inset inset 0px 0px 12px 12px rgba(0, 0, 0, 1),
    0px 0px 65px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset inset 0px 0px 12px 12px rgba(0, 0, 0, 1),
    0px 0px 65px 5px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0px 0px 12px 12px rgba(0, 0, 0, 1),
    0px 0px 65px 5px rgba(0, 0, 0, 0.5);
  background: #1a1c1a;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 110px;
}
.clock::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #df6208;
  background-color: #2f362f;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.inner-circle {
  width: 200px;
  height: 350px;
  border-radius: 50%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: start;
}
.inner-circle-2 {
  width: 150px;
  height: 250px;
}
.inner-circle-3 {
  width: 100px;
  height: 155px;
}
.border-circle {
  border-radius: 50%;
  position: absolute;
  background: transparent;
  border: 2px solid rgba(223, 98, 8, 0.2);
  left: 50%;
  top: 50%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%);
}
.border-circle:nth-child(2) {
  width: 130px;
  height: 130px;
}
.border-circle:nth-child(3) {
  width: 80px;
  height: 80px;
}
.inner-circle div {
  position: relative;
  height: 50%;
  width: 7px;
  z-index: 1;
  border-radius: 5px;
  display: inline-block;
  transform-origin: bottom;
  transform: scale(0.5);
  z-index: 0;
  background: rgb(223, 98, 8);
  background: linear-gradient(
    180deg,
    rgba(223, 98, 8, 0.9108018207282913) 50%,
    rgba(255, 0, 0, 0.9304096638655462) 100%
  );
}
.inner-circle-2 div {
  width: 4px;
}
.inner-circle-3 div {
  width: 3px;
}
span {
  position: absolute;
  text-align: center;
  transform: rotate(calc(var(--i) * 29.7deg));
  inset: 25px;
}
span b {
  font-size: 18px;
  position: absolute;
  text-align: center;
  transform: rotateZ(calc(var(--i) * -30deg));
  display: inline-block;
  opacity: 0.9;
}

/* digital clock */
.digital-time-wrap {
  width: 10px;
  height: 80%;
  background-color: #1a1c1a;
  position: absolute;
  left: 48.5%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  transform-origin: 50% 0%;
  animation-timing-function: linear;
}
@keyframes rotate {
  0% {
    transform: rotate(-6deg);
    animation-timing-function: ease-in;
  }
  25% {
    transform: rotate(0deg);
    animation-timing-function: ease-out;
  }
  50% {
    transform: rotate(6deg);
    animation-timing-function: ease-in;
  }
  75% {
    transform: rotate(0deg);
    animation-timing-function: ease-out;
  }
  100% {
    transform: rotate(-6deg);
  }
}
#digital-time {
  width: fit-content;
  display: flex;
  padding: 10px;
  border: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  -webkit-box-shadow: 0px 0px 65px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 65px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 65px 5px rgba(0, 0, 0, 0.5);
  background: #242824;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
#digital-time div {
  font-size: 20px;
  width: 50px;
  text-align: center;
  position: relative;
}
#digital-time div:nth-child(1)::after,
#digital-time div:nth-child(2)::after {
  content: ":";
  position: absolute;
  right: -4px;
  opacity: 0.7;
}
#digital-time div:nth-child(4) {
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

JS

let hrs = document.querySelector("#hrs");
let sec = document.querySelector("#sec");
let min = document.querySelector("#min");

setInterval(() => {
  let day = new Date();
  let hh = day.getHours() * 30;
  let mm = day.getMinutes() * 6;
  let ss = day.getSeconds() * 6;

hrs.style.transform = `rotateZ(${hh + mm / 12}deg)`;
  min.style.transform = `rotateZ(${mm}deg)`;
  sec.style.transform = `rotateZ(${ss}deg)`;
});

// digital clock
function updateClock() {
  const now = new Date();

const hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();
  const ampm = hours >= 12 ? "PM" : "AM";

document.getElementById("hours").textContent = formatTime(hours % 12 || 12);
  document.getElementById("minuts").textContent = formatTime(minutes);
  document.getElementById("seconds").textContent = formatTime(seconds);
  document.getElementById("ampm").textContent = ampm;
}

function formatTime(time) {
  return time < 10 ? "0" + time : time;
}

setInterval(updateClock, 1000);
updateClock();

Recomendado

Restaurante

Navegación de la barra lateral HTML del panel de control de OMIC EST

Botón de inicio de sesión

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS