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>