Ceas analogic in css ~ Blogul lui Petre Vitan

Widget Ceas Analogic cu Bordură Animată Realizat de petre-vitan

Previzualizare ceas în timp real:

petre-vitan

Codul sursă de copiat:

<!-- Widget Ceas Analogic Animat -->
<!-- Realizat de petre-vitan -->
<div class="pv-clock-box-wrapper">
  <div class="pv-clock-border-glow"></div>
  <div class="pv-analog-clock-face">
    <div class="pv-author-brand">petre-vitan</div>
    
    <!-- Toate cele 12 numere -->
    <div class="pv-num pv-t12">12</div>
    <div class="pv-num pv-t1">1</div>
    <div class="pv-num pv-t2">2</div>
    <div class="pv-num pv-t3">3</div>
    <div class="pv-num pv-t4">4</div>
    <div class="pv-num pv-t5">5</div>
    <div class="pv-num pv-t6">6</div>
    <div class="pv-num pv-t7">7</div>
    <div class="pv-num pv-t8">8</div>
    <div class="pv-num pv-t9">9</div>
    <div class="pv-num pv-t10">10</div>
    <div class="pv-num pv-t11">11</div>
    
    <!-- Limbile ceasului -->
    <div id="pv-h-hand" class="pv-hand pv-hour"></div>
    <div id="pv-m-hand" class="pv-hand pv-minute"></div>
    <div id="pv-s-hand" class="pv-hand pv-second"></div>
    <div class="pv-center-pin"></div>
  </div>
</div>

<script type='text/javascript'>
//<![CDATA[
function actualizeazaCeasPV() {
  var acum = new Date();
  var ore = acum.getHours() % 12;
  var minute = acum.getMinutes();
  var secunde = acum.getSeconds();

  var gradeSecunda = secunde * 6;
  var gradeMinut = (minute * 6) + (secunde * 0.1);
  var gradeOra = (ore * 30) + (minute * 0.5);

  document.getElementById('pv-s-hand').style.transform = 'rotate(' + gradeSecunda + 'deg)';
  document.getElementById('pv-m-hand').style.transform = 'rotate(' + gradeMinut + 'deg)';
  document.getElementById('pv-h-hand').style.transform = 'rotate(' + gradeOra + 'deg)';
}

document.addEventListener("DOMContentLoaded", function() {
  setInterval(actualizeazaCeasPV, 1000);
  actualizeazaCeasPV();
});
//]]>
</script>

<style>
@keyframes pvRotateBorder {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes pvGlowNumbers {
  0% { text-shadow: 0 0 2px rgba(255,255,255,0.6); }
  50% { text-shadow: 0 0 8px rgba(0, 170, 102, 0.8); color: #00ff99; }
  100% { text-shadow: 0 0 2px rgba(255,255,255,0.6); }
}

.pv-clock-box-wrapper {
  position: relative;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 15px auto;
}
.pv-clock-border-glow {
  position: absolute;
  width: 150%;
  height: 150%;
  background: conic-gradient(#00aa66, #00ff99, #006699, #00aa66);
  animation: pvRotateBorder 4s linear infinite;
  z-index: 1;
}
.pv-analog-clock-face {
  position: absolute;
  width: 198px;
  height: 198px;
  background: #1a1a1a;
  border-radius: 50%;
  z-index: 2;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.9);
  font-family: Arial, sans-serif;
}
.pv-author-brand {
  position: absolute;
  width: 100%;
  top: 60px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: #00aa66;
  letter-spacing: 1px;
  z-index: 3;
  pointer-events: none;
}
.pv-num {
  position: absolute;
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
  width: 26px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  animation: pvGlowNumbers 3s ease-in-out infinite;
  white-space: nowrap;
}

/* Pozitii precise corectate pentru cutii de text de 26px latime */
.pv-t12 { top: 8px; left: 86px; }
.pv-t1  { top: 19px; left: 129px; }
.pv-t2  { top: 48px; left: 158px; }
.pv-t3  { top: 89px; left: 168px; }
.pv-t4  { top: 130px; left: 158px; }
.pv-t5  { top: 159px; left: 129px; }
.pv-t6  { top: 170px; left: 86px; }
.pv-t7  { top: 159px; left: 43px; }
.pv-t8  { top: 130px; left: 14px; }
.pv-t9  { top: 89px; left: 4px; }
.pv-t10 { top: 48px; left: 14px; }
.pv-t11 { top: 19px; left: 43px; }

.pv-hand {
  position: absolute;
  bottom: 50%;
  transform-origin: bottom;
  border-radius: 4px;
}
.pv-hour {
  width: 4px;
  height: 48px;
  background: #ffffff;
  left: calc(50% - 2px);
  z-index: 4;
}
.pv-minute {
  width: 3px;
  height: 68px;
  background: #bbbbbb;
  left: calc(50% - 1.5px);
  z-index: 5;
}
.pv-second {
  width: 1.5px;
  height: 78px;
  background: #ff0000;
  left: calc(50% - 0.75px);
  z-index: 6;
  border-radius: 0;
}
.pv-center-pin {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #ff0000;
  border-radius: 50%;
  top: calc(50% - 5px);
  left: calc(50% - 5px);
  z-index: 7;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
</style>

🛠️ Cum se instalează ceasul pe Blogspot:

Apăsați pe butonul Copiază Codul din partea de sus.
Intrați în panoul de administrare Blogger.
Navigați la categoria Aspect (Layout) din meniul lateral stâng.
Alegeți secțiunea dorită (de regulă în Sidebar / bara laterală sau în Footer / subsol) și dați clic pe Adăugați un gadget (Add a Gadget).
Selectați tipul de gadget HTML/JavaScript din listă.
Lipiți codul copiat direct în caseta mare de text numită Conținut (Content). Câmpul de Titlu poate rămâne gol dacă nu doriți un text suplimentar deasupra sa.
Dați clic pe Salvați (Save) și nu uitați să confirmați salvarea finală a aspectului din colțul din dreapta jos al paginii Blogger.

Ceas analogic in css

Niciun comentariu:

Trimiteți un comentariu

Formular de contact

Nu rata nicio noutate! Abonează-te și primești articolele pe mail:

Articole la întâmplare

Blogul lui Nurilusa

Ultimile comentarii

Bine de stiut