clock – Thingography.com https://thingography.com More than a Photo Gallery Mon, 18 Feb 2019 17:03:00 +0000 en-US hourly 1 Clock CSS Animation https://thingography.com/css-clock-2/ https://thingography.com/css-clock-2/#respond Sun, 18 Feb 2018 18:52:16 +0000 http://thingography.com/my-things/?p=72 .ani-box {height: 550px;} .clock { padding: 0em; margin: 2em auto 2em auto; width: 420px; height: 420px; position: relative; } /* ========== The Round face =========== */ .face { border: 5px solid #444; width: 410px; height: 410px; top: 50%; left: 50%; position: absolute; margin-top: -210px; margin-left: -210px; background-color: #B6862E; border-radius: 50%; box-shadow: 0 0 10px 60px #b6862E inset, 0 0 80px 10px #000010; } .face { background: #fefcea; background: -moz-radial-gradient(center, ellipse cover, #fefcea 0%, #f1da36 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); background: -webkit-radial-gradient(center, ellipse cover, #fefcea 0%,#f1da36 100%); background: -o-radial-gradient(center, ellipse cover, #fefcea 0%,#f1da36 100%); background: -ms-radial-gradient(center, ellipse cover, #fefcea 0%,#f1da36 100%); background: radial-gradient(ellipse at center, #fefcea 0%,#f1da36 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=1 ); } /* The Numbers on the Face */ #c1, #c2, #c3, #c4, #c5, #c6, #c7, #c8, #c9, #c10, #c11, #c12 { font-size: 30px; color: #FFFFFF; position: absolute; width: 40px; height: 40px; top: 50%; left: 50%; text-align: center; text-shadow: 0 0 3px #000000; } #c1 {margin:-170px 0 0 70px;} #c2 {margin:-105px 0 0 133px;} #c3 {margin: -20px 0 0 155px;} #c4 {margin: 70px 0 0 134px;} #c5 {margin: 135px 0 0 70px;} #c6 {margin: 160px 0 0 -20px;} #c7 {margin: 135px 0 0 -110px;} #c8 {margin: 70px 0 0 -174px;} #c9 {margin: -20px 0 0 -195px;} #c10 {margin:-105px 0 0 -173px;} #c11 {margin:-170px 0 0 -110px;} #c12 {margin:-195px 0 0 -20px;} /* ============ The Hands ============ */ .big-hand, .little-hand { height: 351px; width: 30px; z-index: 2; position: absolute; top: 50%; left: 50%; margin-top: -175px; margin-left: -11px; animation: hands 3600s linear infinite; } .little-hand { height: 251px; width: 30px; z-index: 1; margin-top: -125px; animation: hand-five 43200s linear infinite; } .second { position: absolute; width: 3px; height: 360px; top: 50%; left: 50%; margin: -180px 0 0 3px; z-index: 3; animation: hands 60s linear infinite; } /* ========== Components of the hands ========== */ .point { margin:0 0 0 5.5px; width: 0; height: 0; z-index: 2; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 30px solid #727272; position: relative; } .shaft, .shaft-l { width: 10px; height: 130px; z-index: 1; background-color: #000000; margin:0 0 0 10px; position: relative; background: #454f77; } .shaft-l { height: 80px; } .shaft-s { position: absolute; width: 3px; height: 180px; background-color: #CC3300; } /* Round part of the base of the Hands */ .ball { margin:0; width: 30px; height: 30px; background: #000000; position: relative; border-radius: 50%; } .ball-s { margin: 170px 0 0 -9px; width: 20px; height: 20px; background: red; position: relative; border-radius: 50%; } /* ===== Comment below clock ===== */ .comment { margin: 1em auto 1em auto; width: 80%; position: relative; font-size: 1.5em; color: #000000; text-align: center; line-height: 1.6em; } /* Hand-Five to move HOUR hand to Five */ @keyframes hand-five { 0% {transform:rotate(153deg);} 100% {transform:rotate(513deg);} } @keyframes hands { 0% {transform:rotate(-360deg);} 100% {transform:rotate( 0deg);} }
1
2
3
4
5
6
7
8
9
10
11
12

Working CSS3 Clock – Always starts at Five-O’clock. This CSS animation clock is created with pure CSS and with adjustments could be used as a timer. By adding some javascript you can pull the correct starting time from the computer/server operating system.

]]> https://thingography.com/css-clock-2/feed/ 0 Crazy Clock CSS Animation https://thingography.com/css-clock/ https://thingography.com/css-clock/#respond Sun, 18 Feb 2018 18:50:47 +0000 http://thingography.com/my-things/?p=68 .ani-box {animation: bgcc 20s infinite; height: 600px; } .clock { padding: 0em 0em 2em 0em; margin: 2em auto 2em auto; width: 400px; height: 400px; position: relative; box-sizing: content-box; } /* ========== The Round face =========== */ .face { border: 5px solid #000000; border-radius: 50%; width: 400px; height: 400px; top: 50%; left: 50%; position: absolute; margin-top: -200px; margin-left: -200px; background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/clock/clock.png'); background-repeat: no-repeat; box-sizing: content-box; } /* ============ The Hands ============ */ .big-hand, .little-hand { position: absolute; top: 50%; left: 50%; } .big-hand { height: 351px; width: 30px; z-index: 2; margin-top: -175px; margin-left: -11px; animation: hands 1s linear infinite; } .little-hand { height: 251px; width: 30px; z-index: 1; margin-top: -125px; margin-left: -11px; animation: hands 12s linear infinite; } /* ===== Second Not to Scale as you cannot distinguish anyway ===== */ .second { position: absolute; width: 3px; height: 360px; top: 50%; left: 50%; margin: -180px 0 0 3px; z-index: 3; animation:hands 0.2s linear infinite; } /* ========== Components of the hands ========== */ .point { margin:0 0 0 5.5px; width: 0; height: 0; z-index: 2; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 30px solid #727272; position: relative; } .shaft, .shaft-l { width: 10px; height: 130px; z-index: 1; background-color: #000000; margin:0 0 0 10px; position: relative; background: #454f77; } .shaft-l { height: 80px; } .shaft-s { position: absolute; width: 3px; height: 180px; background-color: #CC3300; } /* Round part of the base of the Hands */ .ball { margin:0; width: 30px; height: 30px; background: #000000; position: relative; border-radius: 50%; } .ball-s { margin: 170px 0 0 -9px; width: 20px; height: 20px; background: red; position: relative; border-radius: 50%; } @keyframes hands { 0% {transform:rotate(-360deg);} 100% {transform:rotate( 0deg);} } /* =========== END CLOCK ============ */ /* ===== Background Day/Night Fluctuations Keyframes ======== */ @keyframes bgcc { 0% {background-color:#C7D6F9;} 50% {background-color:#051545;} 100% {background-color:#C7D6F9;} }

This CSS clock was a basic trial for a CSS clock with the daylight changing in the background in fast speed.

]]> https://thingography.com/css-clock/feed/ 0