{"id":72,"date":"2018-02-18T18:52:16","date_gmt":"2018-02-18T18:52:16","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=72"},"modified":"2018-11-06T14:42:10","modified_gmt":"2018-11-06T14:42:10","slug":"css-clock-2","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-clock-2\/","title":{"rendered":"Clock CSS Animation"},"content":{"rendered":"<style>\n.ani-box {height: 550px;}\n.clock {\n\tpadding: 0em;\n\tmargin: 2em auto 2em auto;\n\twidth: 420px;\n\theight: 420px;\n\tposition: relative;\n}\n\/* ========== The Round face =========== *\/\n.face {\n\tborder: 5px solid #444;\n\twidth: 410px;\n\theight: 410px;\n\ttop: 50%;\n\tleft: 50%;\n\tposition: absolute;\n\tmargin-top: -210px;\n\tmargin-left: -210px;\n\tbackground-color: #B6862E;\n\tborder-radius: 50%;\n\tbox-shadow: 0 0 10px 60px #b6862E inset, 0 0 80px 10px #000010;\n}\n.face {\n\tbackground: #fefcea;\n\tbackground: -moz-radial-gradient(center, ellipse cover,  #fefcea 0%, #f1da36 100%); \n\tbackground: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); \n\tbackground: -webkit-radial-gradient(center, ellipse cover,  #fefcea 0%,#f1da36 100%);\n\tbackground: -o-radial-gradient(center, ellipse cover,  #fefcea 0%,#f1da36 100%); \n\tbackground: -ms-radial-gradient(center, ellipse cover,  #fefcea 0%,#f1da36 100%);\n\tbackground: radial-gradient(ellipse at center,  #fefcea 0%,#f1da36 100%); \n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=1 ); \n}\n\/*  The Numbers on the Face  *\/\n#c1, #c2, #c3, #c4, #c5, #c6, #c7, #c8, #c9, #c10, #c11, #c12 {\n\tfont-size: 30px;\n\tcolor: #FFFFFF;\n\tposition: absolute;\n\twidth: 40px;\n\theight: 40px;\n\ttop: 50%;\n\tleft: 50%;\n\ttext-align: center;\n\ttext-shadow: 0 0 3px #000000;\n}\n#c1  {margin:-170px 0 0   70px;}\n#c2  {margin:-105px 0 0  133px;}\n#c3  {margin: -20px 0 0  155px;}\n#c4  {margin:  70px 0 0  134px;}\n#c5  {margin: 135px 0 0   70px;}\n#c6  {margin: 160px 0 0  -20px;}\n#c7  {margin: 135px 0 0 -110px;}\n#c8  {margin:  70px 0 0 -174px;}\n#c9  {margin: -20px 0 0 -195px;}\n#c10 {margin:-105px 0 0 -173px;}\n#c11 {margin:-170px 0 0 -110px;}\n#c12 {margin:-195px 0 0  -20px;}\n\/* ============  The Hands ============  *\/\n.big-hand, .little-hand {\n\theight: 351px;\n\twidth: 30px;\n\tz-index: 2;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\tmargin-top: -175px;\n\tmargin-left: -11px;\n\tanimation: hands 3600s linear infinite;\n}\n.little-hand {\n\theight: 251px;\n\twidth: 30px;\n\tz-index: 1;\n\tmargin-top: -125px;\n\tanimation: hand-five 43200s linear infinite;\n}\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 60s 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\/* ===== Comment below clock  ===== *\/\n.comment {\n\tmargin: 1em auto 1em auto;\n\twidth: 80%;\n\tposition: relative;\n\tfont-size: 1.5em;\n\tcolor: #000000;\n\ttext-align: center;\n\tline-height: 1.6em;\n}\n\/*  Hand-Five to move HOUR hand to Five  *\/\n@keyframes hand-five {\n\t0%   {transform:rotate(153deg);}\n\t100% {transform:rotate(513deg);}\n} \n@keyframes hands {\n\t0%   {transform:rotate(-360deg);}\n\t100% {transform:rotate(   0deg);}\n} \n<\/style>\n<div class=\"ani-box\">\n<div class=\"clock\">\n<div class=\"face\">\n<div id=\"c1\">1<\/div>\n<div id=\"c2\">2<\/div>\n<div id=\"c3\">3<\/div>\n<div id=\"c4\">4<\/div>\n<div id=\"c5\">5<\/div>\n<div id=\"c6\">6<\/div>\n<div id=\"c7\">7<\/div>\n<div id=\"c8\">8<\/div>\n<div id=\"c9\">9<\/div>\n<div id=\"c10\">10<\/div>\n<div id=\"c11\">11<\/div>\n<div id=\"c12\">12<\/div>\n<\/p><\/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> <!-- Clock -->\n<\/div>\n<p> <!-- Ani-box--><\/p>\n<p class=\"below-ani\"> Working CSS3 Clock &#8211; Always starts at Five-O&#8217;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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1 2 3 4 5 6 7 8 9 10 11 12 Working CSS3 Clock &#8211; Always starts at Five-O&#8217;clock. This CSS animation clock is created with pure CSS and with adjustments could be used as a timer. By adding<\/p>\n","protected":false},"author":2,"featured_media":2575,"comment_status":"open","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,12,4,5],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/72"}],"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=72"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/72\/revisions"}],"predecessor-version":[{"id":2652,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/72\/revisions\/2652"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2575"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=72"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}