<!doctype html>
<html>
<head>
<style>
:root {
--main-heading: "Stop Watch starts ";
}
body {
background-color: #f0f0f0;
}
#topdiv {
position:absolute;
top:0px;
left:0px;
width:calc(99%);
height:calc(99%);
background-color: transparent;
border: 1px solid red;
z-index: -9;
}
#sw {
position:absolute;
top:0px;
left:0px;
}
#seconds {
position:absolute;
top:180px;
left:51px;
width:120px;
height:3px;
color:blue;
z-index:7;
transform: rotate(270deg);
-o-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
background: rgba(255,255,255,0.0); /* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.0)), color-stop(10%,rgba(255,255,255,0.0)), color-stop(10%,rgba(255,255,255,0.0)), color-stop(24%,rgba(255,255,255,0.0)), color-stop(24%,#34495e), color-stop(42%,#34495e), color-stop(42%,#207cca), color-stop(70%,#207cca), color-stop(70%,#207cca), color-stop(70%,#34495e), color-stop(100%,#ff0000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0.0) 0%,rgba(255,255,255,0.0) 10%,rgba(255,255,255,0.0) 10%,rgba(255,255,255,0.0) 24%,rgba(255,255,255,0.0) 24%,#34495e 42%,#207cca 42%,#207cca 70%,#207cca 70%,#34495e 70%,#ff0000 100%); /* Chrome10+,Safari5.1+ */
background-image: -moz-linear-gradient(left, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.0) 9%, rgba(255,255,255,0.0) 10%, rgba(255,255,255,0.0) 24%, rgba(255,255,255,0.0) 24%, #34495e 42%, #207cca 42%, #207cca 70%, #207cca 70%, #34495e 71%, #ff0000 100%);
background-image: -o-linear-gradient(left, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.0) 9%, rgba(255,255,255,0.0) 10%, rgba(255,255,255,0.0) 24%, rgba(255,255,255,0.0) 24%, #34495e 42%, #207cca 42%, #207cca 70%, #207cca 70%, #34495e 71%, #ff0000 100%);
background-image: linear-gradient(left, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.0) 9%, rgba(255,255,255,0.0) 10%, rgba(255,255,255,0.0) 24%, rgba(255,255,255,0.0) 24%, #34495e 42%, #207cca 42%, #207cca 70%, #207cca 70%, #34495e 71%, #ff0000 100%); /* Chrome10+,Safari5.1+ */
-moz-animation: spin 60s infinite linear;
-webkit-animation: spin 60s infinite linear;
animation: spin 60s linear infinite reverse;
animation-delay: 5s;
}
#minutes {
position:absolute;
top:140px;
left:91px;
width:40px;
height:2px;
color:blue;
z-index:7;
transform: rotate(270deg);
-o-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
background: rgba(255,255,255,0.0); /* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.0)), color-stop(10%,rgba(255,255,255,0.0)), color-stop(10%,rgba(255,255,255,0.0)), color-stop(24%,rgba(255,255,255,0.0)), color-stop(24%,#34495e), color-stop(42%,#34495e), color-stop(42%,#207cca), color-stop(70%,#207cca), color-stop(70%,#207cca), color-stop(70%,#34495e), color-stop(100%,#ff0000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0.0) 0%,rgba(255,255,255,0.0) 10%,rgba(255,255,255,0.0) 10%,rgba(255,255,255,0.0) 24%,rgba(255,255,255,0.0) 24%,#34495e 42%,#207cca 42%,#207cca 70%,#207cca 70%,#34495e 70%,#ff0000 100%); /* Chrome10+,Safari5.1+ */
background-image: -moz-linear-gradient(left, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.0) 9%, rgba(255,255,255,0.0) 10%, rgba(255,255,255,0.0) 24%, rgba(255,255,255,0.0) 24%, #34495e 42%, #207cca 42%, #207cca 70%, #207cca 70%, #34495e 71%, #ff0000 100%);
background-image: -o-linear-gradient(left, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.0) 9%, rgba(255,255,255,0.0) 10%, rgba(255,255,255,0.0) 24%, rgba(255,255,255,0.0) 24%, #34495e 42%, #207cca 42%, #207cca 70%, #207cca 70%, #34495e 71%, #ff0000 100%);
background-image: linear-gradient(left, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.0) 9%, rgba(255,255,255,0.0) 10%, rgba(255,255,255,0.0) 24%, rgba(255,255,255,0.0) 24%, #34495e 42%, #207cca 42%, #207cca 70%, #207cca 70%, #34495e 71%, #ff0000 100%); /* Chrome10+,Safari5.1+ */
-moz-animation: spin 3600s infinite linear;
-webkit-animation: spin 3600s infinite linear;
animation: spin 3600s linear infinite reverse;
animation-delay: 5s;
}
@-moz-keyframes spin {
from { -moz-transform: rotate(630deg); }
to { -moz-transform: rotate(270deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(630deg); }
to { -webkit-transform: rotate(270deg); }
}
@keyframes spin {
from {transform:rotate(630deg);}
to {transform:rotate(270deg);}
}
#seconds:hover {
-moz-animation: spin 60s infinite linear;
-webkit-animation: spin 60s infinite linear;
animation: spin 60s linear infinite reverse;
}
#minutes:hover {
-moz-animation: spin 3600s infinite linear;
-webkit-animation: spin 3600s infinite linear;
animation: spin 3600s linear infinite reverse;
}
@keyframes countdown {
100% {
color: red;
content: "in 0 seconds";
}
80% {
color: red;
content: "in 1 second";
}
60% {
color: red;
content: "in 2 seconds";
}
40% {
color: red;
content: "in 3 seconds";
}
20% {
color: red;
content: "in 4 seconds";
}
0% {
color: red;
content: "in 5 seconds";
}
}
.banner:after {
float:right;
font-size: 100px;
content: "now!";
color: red;
animation: countdown 5s;
-webkit-transition: color 1s ease;
transition: color 1s ease;
}
.banner:before {
content: var(--main-heading); //"Stop Watch starts ";
}
.banner {
font-size: 50px;
float:right;
}
.subbanner {
float:right;
}
</style>
</head>
<body>
<img id=sw src=stop_watch_300px.png></img>
<hr id=seconds class=ms></hr>
<hr id=minutes class=minc></hr>
<h3 class=subbanner>RJM Programming - December, 2017 <br>Thanks to <a target=_blank title='Clipart - stop watch ... thanks' href='https://openclipart.org/detail/46075/stop-watch'>Clipart - stop watch</a> </h3><br>
<h1 class=banner></h1><br>
<div id='topdiv'></div>
</body>
</html>