Time-Service/css/clock.css
2017-08-22 00:13:54 +02:00

91 lines
1.7 KiB
CSS

/* If you want you can use font-face */
@font-face {
font-family: 'BebasNeueRegular';
src: url('BebasNeue-webfont.eot');
src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('BebasNeue-webfont.woff') format('woff'),
url('BebasNeue-webfont.ttf') format('truetype'),
url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.container {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.clock {
width: 800px;
margin: 0 auto;
padding: 30px;
color: #fff;
}
#Date {
font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
font-size: 36px;
text-align: center;
text-shadow: 0 0 5px #00c6ff;
}
ul {
width: 800px;
margin: 0 auto;
padding: 0px;
list-style: none;
text-align: center;
}
ul li {
display: inline;
font-size: 10em;
text-align: center;
font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
text-shadow: 0 0 5px #00c6ff;
}
#point {
position: relative;
-moz-animation: mymove 1s ease infinite;
-webkit-animation: mymove 1s ease infinite;
padding-left: 10px;
padding-right: 10px;
}
/* Simple Animation */
@-webkit-keyframes mymove {
0% {opacity: 1.0;
text-shadow: 0 0 20px #00c6ff;
}
50% {
opacity: 0;
text-shadow: none;
}
100% {
opacity: 1.0;
text-shadow: 0 0 20px #00c6ff;
}
}
@-moz-keyframes mymove {
0% {
opacity: 1.0;
text-shadow: 0 0 20px #00c6ff;
}
50% {
opacity: 0;
text-shadow: none;
}
100% {
opacity: 1.0;
text-shadow: 0 0 20px #00c6ff;
};
}