Animación del reloj

Abrir en el editor Publica tu código

Recomendado

30 December 2024

Formulario de inicio de sesión LED

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();

Animación del reloj

Recomendado

Netflix

Botón de confeti

Formulario de inicio de sesión LED

HTML

CSS

JS

Recomendado

Netflix

Botón de confeti

Formulario de inicio de sesión LED

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS