घड़ी एनीमेशन

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

22 April 2025

सीएसएस टीम मेम्बर्स कार्ड

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

घड़ी एनीमेशन

अनुशंसित

एंड्रेस.स्टाहर द्वारा एक कोड

जादुई आकृतियाँ विकसित करना

सीएसएस टीम मेम्बर्स कार्ड

HTML

CSS

JS

अनुशंसित

एंड्रेस.स्टाहर द्वारा एक कोड

जादुई आकृतियाँ विकसित करना

सीएसएस टीम मेम्बर्स कार्ड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS