Homepage von Basti1012 = ,Kurze Scripte und Codeschnipsel ,Hauptmenü

< >
css-uhr-animierte-digitaluhr-effekkt.php

Quell Code

 
<!DOCTYPE html>
<html id="basti1012" lang="de-DE" dir="LTR" class="">
<head>
 
<meta charset="utf-8">
 
<link rel="stylesheet" type="text/css" href="css-uhr-animierte-digitaluhr-effekkt.css">
 



































<style>
body {
  margin:0;
  padding:0;
 
}

canvas {
  background-image: radial-gradient(black, hsl(10,90%,15%));
  margin:0;
}
  body {
  background: #212121;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  text-align: center;
  color: white;
}

h1 {
  color: #e91e63;
  font-weight: 300;
  font-size: 3rem;
  margin-bottom: 0;
}

p {
  color: #b6b6b6;
}

a {
  color: inherit;
}

label {
  display: inline-block;
  padding: .5rem 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #e91e63;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
label:before {
  content: attr(data-trigger-off);
}
label:hover {
  background: #c2185b;
  box-shadow: 0 3px 5px 0 black;
}
label:active {
  top: 1px;
}

*, *:before, *:after {
  box-sizing: border-box;
  transition: all 200ms linear;
}

.clock {
  display: flex;
  width: 750px;
  margin: 3rem auto 0;
}
</style>

 




 
 

<input type="checkbox" id="animation-trigger"/>
<label for="animation-trigger" data-trigger-on="Start" data-trigger-off="Pause"></label>
<div class="clock">
  <div class="no no--min-tens no--sec-tens">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="no no--min-units">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="no no--colon">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="no no--sec-tens">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="no no--sec-units">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>