{"id":68,"date":"2018-02-18T18:50:47","date_gmt":"2018-02-18T18:50:47","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=68"},"modified":"2025-02-13T21:10:39","modified_gmt":"2025-02-13T21:10:39","slug":"css-clock","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-clock\/","title":{"rendered":"Crazy Clock CSS Animation"},"content":{"rendered":"<style>\n.ani-box {animation: bgcc 20s infinite;\nheight: 600px;\n}\n.clock {\n\tpadding: 0em 0em 2em 0em;\n\tmargin: 2em auto 2em auto;\n\twidth: 400px;\n\theight: 400px;\n\tposition: relative;\n box-sizing: content-box;\n}\n\/* ========== The Round face =========== *\/\n.face {\n\tborder: 5px solid #000000;\n\tborder-radius: 50%;\n\twidth: 400px;\n\theight: 400px;\n\ttop: 50%;\n\tleft: 50%;\n\tposition: absolute;\n\tmargin-top: -200px;\n\tmargin-left: -200px;\n\tbackground-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/clock\/clock.png');\n\tbackground-repeat: no-repeat;\n box-sizing: content-box;\n}\n\/* ============  The Hands ============  *\/\n.big-hand, .little-hand {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n}\n.big-hand {\n\theight: 351px;\n\twidth: 30px;\n\tz-index: 2;\n\tmargin-top: -175px;\n\tmargin-left: -11px;\n\tanimation: hands 1s linear infinite;\n}\n.little-hand {\n\theight: 251px;\n\twidth: 30px;\n\tz-index: 1;\n\tmargin-top: -125px;\n\tmargin-left: -11px;\n\tanimation: hands 12s linear infinite;\n}\n\/* ===== Second Not to Scale as you cannot distinguish anyway ===== *\/\n.second {\n\tposition: absolute;\n\twidth: 3px;\n\theight: 360px;\n\ttop: 50%;\n\tleft: 50%;\n\tmargin: -180px 0 0 3px;\n\tz-index: 3;\n\tanimation:hands 0.2s linear infinite;\n}\n\/* ========== Components of the hands ========== *\/\n.point {\n\tmargin:0 0 0 5.5px;\n\twidth: 0;\n\theight: 0;\n\tz-index: 2;\n\tborder-left: 10px solid transparent;\n\tborder-right: 10px solid transparent;\n\tborder-bottom: 30px solid #727272;\n\tposition: relative;\n}\n.shaft, .shaft-l {\n\twidth: 10px;\n\theight: 130px;\n\tz-index: 1;\n\tbackground-color: #000000;\n\tmargin:0 0 0 10px;\n\tposition: relative;\n\tbackground: #454f77; \n}\n.shaft-l {\n\theight: 80px;\n}\n.shaft-s {\n\tposition: absolute;\n\twidth: 3px;\n\theight: 180px;\n\tbackground-color: #CC3300;\n}\n\/* Round part of the base of the Hands *\/\n.ball {\n\tmargin:0;\n\twidth: 30px;\n\theight: 30px;\n\tbackground: #000000;\n\tposition: relative;\n\tborder-radius: 50%;\n}\n.ball-s {\n\tmargin: 170px 0 0 -9px;\n\twidth: 20px;\n\theight: 20px;\n\tbackground: red;\n\tposition: relative;\n\tborder-radius: 50%;\n}\n@keyframes hands {\n\t0%   {transform:rotate(-360deg);}\n\t100% {transform:rotate(   0deg);}\n} \n\/* =========== END CLOCK ============ *\/\n\/* ===== Background Day\/Night Fluctuations Keyframes ======== *\/\n@keyframes bgcc {\n\t0%  {background-color:#C7D6F9;}\n\t50% {background-color:#051545;}\n\t100% {background-color:#C7D6F9;}\n}\n<\/style>\n<div class=\"ani-box\">\n<div class=\"clock\">\n<div class=\"face\"><\/div>\n<div class=\"little-hand\">\n<div class=\"point\"><\/div>\n<div class=\"shaft-l\"><\/div>\n<div class=\"ball\"><\/div>\n<\/p><\/div>\n<div class=\"big-hand\">\n<div class=\"point\"><\/div>\n<div class=\"shaft\"><\/div>\n<div class=\"ball\"><\/div>\n<\/p><\/div>\n<div class=\"second\">\n<div class=\"shaft-s\"><\/div>\n<div class=\"ball-s\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- Close Clock --><\/p>\n<\/div>\n<p> <!-- Ani-box --><\/p>\n<p class=\"below-ani\"> This CSS clock was a basic trial for a CSS clock with the daylight changing in the background in fast speed.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This CSS clock was a basic trial for a CSS clock with the daylight changing in the background in fast speed.<\/p>\n","protected":false},"author":2,"featured_media":2576,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,12,4,5],"class_list":["post-68","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-clock","tag-css","tag-css-animation"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/68","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/comments?post=68"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/68\/revisions"}],"predecessor-version":[{"id":2800,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/68\/revisions\/2800"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2576"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=68"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=68"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}