{"id":1784,"date":"2018-03-04T18:01:48","date_gmt":"2018-03-04T18:01:48","guid":{"rendered":"http:\/\/thingography.com\/?p=1784"},"modified":"2025-02-13T20:59:30","modified_gmt":"2025-02-13T20:59:30","slug":"css-pool-table","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-pool-table\/","title":{"rendered":"Pool Table and Billiard Balls Pure CSS Animation"},"content":{"rendered":"<style>\n\/*  ==== Pool Table (table=slotview for JS purposes) Start  ====  *\/\n#slot-view {\n\tmargin: 10px auto 0px auto;\n\tbackground-color: #339933;\n\tborder: 50px double #333333;\n\tborder-radius: 20px;\n\twidth: 795px;\n\theight: 440px;\n\tposition: relative;\n\tleft: -3em;\n\tbox-shadow: 0 0 5px 5px #000000;\nbox-sizing: content-box;\n}\n@media screen and (max-width: 1100px) {\n    #slot-view  {transform: scale(0.8); left: -10%;}\n}\n@media screen and (max-width: 760px) {\n    #slot-view  {transform: scale(0.6); left: -20%;}\n}\n@media screen and (max-width: 620px) {\n    #slot-view  {transform: scale(0.4); left: -50%;}\n}\n@media screen and (max-width: 480px) {\n    #slot-view  {transform: scale(0.2); left: -70%;}\n}\n\/* adds rim-color on the table edge *\/\n#table-rim {\n\tmargin: -33px 0px 0px -33px;\n\tborder: 16px solid #673E36;\n\tbackground-color: transparent;\n\tposition: absolute;\n\tborder-radius: 20px;\n\twidth: 829px;\n\theight: 474px;\nbox-sizing: content-box;<\/p>\n<p>}\n#dot {\n\tmargin: -20px 0px 0px 180px;\n\tbackground: radial-gradient(ellipse at center, #ffffff 3%,#ffffff 15%,#0a0e0a 40%,#0a0e0a 50%,#0a0e0a 60%,#ffffff 85%,#ffffff 100%);\n\twidth: 20px;\n\theight: 20px;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\tborder-radius: 50%;\n\topacity:0.6;\n}\n.one, .two, .three, .four, .five, .six {\n\twidth: 60px;\n\theight: 55px;\n\tposition: absolute;\n\tborder-radius: 50%;\n\tbackground-color: #666666;\n\tbackground: radial-gradient(ellipse at center, #4c4c4c 0%,#444444 12%,#444444 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);\n\tz-index: 5;\n}\n.one {margin-top: -40px;margin-left: -40px;}\n.one, .six {transform: rotate(45deg);}\n.two {margin-top: -45px; margin-left: 360px;}\n.three, .four {transform: rotate(-45deg);}\n.three {margin-top: -40px;margin-left: 780px;}\n.four {margin-top:425px;margin-left: -40px;}\n.five {margin-top: 430px;margin-left: 360px;}\n.six {margin-top: 425px;margin-left: 780px;}\n#cue, #ball-1, #ball-2, #ball-3, #ball-4, #ball-5, #ball-6, #ball-7, #ball-8, #ball-9, #ball-10 {\n\tborder: 2px solid #000000;\n\tborder-radius: 50%;\n\tposition: absolute;\n\twidth: 30px;\n\theight: 30px;\n\ttop: 50%;\n\tleft: 50%;\n\toverflow: hidden;\n\tz-index: 10;\n}\n#cue {\n\tmargin: -20px 0px 0px 175px;\n\tbackground-color: #F7F7F7;\n\tanimation: cue 8s linear;\n}\n@keyframes cue { \n0%   {transform: translate(   0px,   0px);}\n20%  {transform: translate(-475px, 210px);}\n30%  {transform: translate(-575px,  80px);}\n75%  {transform: translate( 140px,-210px);}\n85%  {transform: translate( 190px,-100px);}\n100% {transform: translate(   0px,   0px);}\n} \n#ball-1 {\n\tmargin: -225px 0px 0px 351px;\n\tbackground-color: #FFFF00;\n\tanimation: sink 4s linear;\n\tanimation-delay: 6s;\n}\n#ball-1 .number {\n\tanimation: number 4s linear;\n\tanimation-delay: 6s;\n}\n@keyframes number { \n0%  {margin: -6px 0px 0px -6px;}\n50% {margin:-20px 0px 0px 10px;}\n100%{margin:-20px 0px 0px 10px;}\n} \n@keyframes sink { \n0%  {transform: translate( 0px,  0px);  opacity:1;}\n50% {transform: translate(40px, -20px) scale(1.0);  opacity:1;}\n90% {transform: translate(40px, -20px) scale(0.76); opacity:1;}\n100%{transform: translate(40px, -10px) scale(0.7);  opacity:0;}\n} \n#ball-2 {\n\tmargin: -140px 0px 0px -120px;\n\tbackground-color: #0000FF;\n}\n#ball-3 {\n\tmargin: 50px 0px 0px -250px;\n\tbackground-color: #FF0000;\n}\n#ball-4 {\n\tmargin: -190px 0px 0px -350px;\n\tbackground-color: #990099;\n}\n#ball-5 {\n\tmargin: 100px 0px 0px -300px;\n\tbackground-color: #FF9900;\n}\n#ball-6 {\n\tmargin: 70px 0px 0px -180px;\n\tbackground-color: #006600;\n\tbackground: linear-gradient(to bottom, #ffffff 0%,#ffffff 20%,#006600 20%,#006600 50%,#006600 80%,#ffffff 80%,#ffffff 100%);\n\ttransform: rotate(45deg);\n}\n#ball-7 {\n\tmargin: 150px 0px 0px 220px;\n\tbackground-color: #800000;\n}\n#ball-8 {\n\tmargin: -180px 0px 0px 50px;\n\tbackground-color: #000000;\n}\n#ball-9 {\n\tmargin: -125px 0px 0px -350px;\n\tbackground-color: #FFFF00;\n\tbackground: linear-gradient(to bottom, #ffffff 0%,#ffffff 20%,#ffff00 20%,#ffff00 50%,#ffff00 80%,#ffffff 80%,#ffffff 100%);\n}\n#ball-10 {\n\tmargin: -200px 0px 0px -170px;\n\tbackground-color: #0000FF;\n\tbackground: linear-gradient(to bottom, #ffffff 0%,#ffffff 20%,#0000ff 20%,#0000ff 50%,#0000ff 80%,#ffffff 80%,#ffffff 100%); \n\ttransform: rotate(85deg);\n}\n.number {\n\tmargin: -6px 0px 0px -6px;\n\tborder-radius: 50%;\n\tbackground-color: #FFFFFF;\n\twidth: 12px;\n\theight: 12px;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttext-align: center;\n\tfont-size: 10px;\n\tfont-weight: bold;\nline-height: 10px;\n}\n\/* just moving the numbers on the balls around for more realistic look *\/\n#ball-4 .number {margin-left: -13px;}\n#ball-2 .number {margin: -1px 0 0 1px;}\n#ball-9 .number {margin-left: -10px;}\n#ball-8 .number {margin: 5px 0 0 -10px;}\n#ball-5 .number {margin: -8px 0 0 5px;}\n\/* =========== Replay Button  =============  *\/\n#control-bar {\n\twidth: 100%;\n\tmargin-right: auto;\n\tmargin-left: auto;\n\ttext-align: center;\n}\n.play {\n\tpadding: 0em 0.5em;\n\tmargin: 1.3em auto 1em auto;\n\tborder: 5px solid #000000;\n\tfont-size: 1.6em;\n\tline-height: 1.4em;\n\ttext-align: center;\n\tz-index: 99;\n}\n.play:hover {\n\tborder-color: #FF3300;\n\tbackground: #FFFF99;\n\tcursor: pointer;\ncolor: #999;\n}\n<\/style>\n<div class=\"ani-box\">\n<div id=\"slot-wrapper\"><!-- for replay purposes --> <\/p>\n<div id=\"slot-view\">\n<div id=\"table-rim\"><\/div>\n<div id=\"dot\"><\/div>\n<div class=\"one\"><\/div>\n<div class=\"two\"><\/div>\n<div class=\"three\"><\/div>\n<div class=\"four\"><\/div>\n<div class=\"five\"><\/div>\n<div class=\"six\"><\/div>\n<div id=\"ball-1\">\n<div class=\"number\">1<\/div>\n<\/div>\n<div id=\"ball-2\">\n<div class=\"number\">2<\/div>\n<\/div>\n<div id=\"ball-3\">\n<div class=\"number\">3<\/div>\n<\/div>\n<div id=\"ball-4\">\n<div class=\"number\">4<\/div>\n<\/div>\n<div id=\"ball-5\">\n<div class=\"number\">5<\/div>\n<\/div>\n<div id=\"ball-6\">\n<div class=\"number\">14<\/div>\n<\/div>\n<div id=\"ball-7\">\n<div class=\"number\">7<\/div>\n<\/div>\n<div id=\"ball-8\">\n<div class=\"number\">8<\/div>\n<\/div>\n<div id=\"ball-9\">\n<div class=\"number\">9<\/div>\n<\/div>\n<div id=\"ball-10\">\n<div class=\"number\">10<\/div>\n<\/div>\n<div id=\"cue\"><\/div>\n<\/p><\/div>\n<p> <!-- Close Slot-View -->\n\t<\/div>\n<p> <!-- Close Slot-Wrapper for replay purposes --><\/p>\n<div id=\"control-bar\">\n\t<button class=\"play tooltip\">Replay<\/button>\n<\/div>\n<\/div>\n<p> <!-- Close  Ani  --><\/p>\n<div class=\"below-ani\"> Pure CSS Pool Table and  Billiard Balls<\/div>\n<p><\/p>\n<p><script src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/slot-machine.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1 2 3 4 5 14 7 8 9 10 Replay Pure CSS Pool Table and Billiard Balls<\/p>\n","protected":false},"author":2,"featured_media":2598,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,182,181,4,5,180,183],"class_list":["post-1784","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-balls","tag-billiard","tag-css","tag-css-animation","tag-pool","tag-pool-table"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1784","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=1784"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1784\/revisions"}],"predecessor-version":[{"id":3808,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1784\/revisions\/3808"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2598"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=1784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=1784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=1784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}