{"id":1671,"date":"2018-03-03T19:03:49","date_gmt":"2018-03-03T19:03:49","guid":{"rendered":"http:\/\/thingography.com\/?p=1671"},"modified":"2025-02-13T20:59:45","modified_gmt":"2025-02-13T20:59:45","slug":"css-slot-machine","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-slot-machine\/","title":{"rendered":"Slot Machine CSS Animation"},"content":{"rendered":"<style>\n.ani-box {width: 100%; height:600px;\nbackground-color: #ffffff;\nbackground-image: url(\"data:image\/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath d='M81.28 88H68.413l19.298 19.298L81.28 88zm2.107 0h13.226L90 107.838 83.387 88zm15.334 0h12.866l-19.298 19.298L98.72 88zm-32.927-2.207L73.586 78h32.827l.5.5 7.294 7.293L115.414 87l-24.707 24.707-.707.707L64.586 87l1.207-1.207zm2.62.207L74 80.414 79.586 86H68.414zm16 0L90 80.414 95.586 86H84.414zm16 0L106 80.414 111.586 86h-11.172zm-8-6h11.173L98 85.586 92.414 80zM82 85.586L87.586 80H76.414L82 85.586zM17.414 0L.707 16.707 0 17.414V0h17.414zM4.28 0L0 12.838V0h4.28zm10.306 0L2.288 12.298 6.388 0h8.198zM180 17.414L162.586 0H180v17.414zM165.414 0l12.298 12.298L173.612 0h-8.198zM180 12.838L175.72 0H180v12.838zM0 163h16.413l.5.5 7.294 7.293L25.414 172l-8 8H0v-17zm0 10h6.613l-2.334 7H0v-7zm14.586 7l7-7H8.72l-2.333 7h8.2zM0 165.414L5.586 171H0v-5.586zM10.414 171L16 165.414 21.586 171H10.414zm-8-6h11.172L8 170.586 2.414 165zM180 163h-16.413l-7.794 7.793-1.207 1.207 8 8H180v-17zm-14.586 17l-7-7h12.865l2.333 7h-8.2zM180 173h-6.613l2.334 7H180v-7zm-21.586-2l5.586-5.586 5.586 5.586h-11.172zM180 165.414L174.414 171H180v-5.586zm-8 5.172l5.586-5.586h-11.172l5.586 5.586zM152.933 25.653l1.414 1.414-33.94 33.942-1.416-1.416 33.943-33.94zm1.414 127.28l-1.414 1.414-33.942-33.94 1.416-1.416 33.94 33.943zm-127.28 1.414l-1.414-1.414 33.94-33.942 1.416 1.416-33.943 33.94zm-1.414-127.28l1.414-1.414 33.942 33.94-1.416 1.416-33.94-33.943zM0 85c2.21 0 4 1.79 4 4s-1.79 4-4 4v-8zm180 0c-2.21 0-4 1.79-4 4s1.79 4 4 4v-8zM94 0c0 2.21-1.79 4-4 4s-4-1.79-4-4h8zm0 180c0-2.21-1.79-4-4-4s-4 1.79-4 4h8z' fill='%2349629e' fill-opacity='0.1' fill-rule='evenodd'\/%3E%3C\/svg%3E\");\n}\n\/*  ===== Test Link above Slot Machine  =====  *\/\n#vp {\n\tmargin: 0.5em auto 1em auto;\n\twidth: 80%;\n\tposition: relative;\n\tcolor: #666666;\n}\n#vp p {\n\tmargin: 0px auto 0px auto;\n\twidth: 100%;\n\ttext-align: center;\n\tfont-size: 1.6em;\n\tline-height: 1.4em;\n}\n#vp a {font-weight: bold;}\n\/*  ================= Animation Start  ====================  *\/\n.spin, .spin2 {\n\twidth: 110px;\n\toverflow: hidden;\n\tposition: absolute;\n\theight: 1560px;\n}\n.spin {animation: spin 1s linear 5;}\n.spin2 {animation: spin2 1s linear 5;}\n.wheel2 .spin, .wheel2 .spin2 {animation-delay: 0.5s;}\n.wheel3 .spin, .wheel3 .spin2 {animation-delay: 1s;}\n.wheel4 .spin, .wheel4 .spin2 {animation-delay: 1.5s;}\n.wheel5 .spin, .wheel5 .spin2 {animation-delay:2s;}\n@keyframes spin { \n\t0%  {top: 0px;}\n\t100%{top: 1560px;}\n}\n@keyframes spin2 { \n\t0%  {top: -1560px;}\n\t100%{top: 0px;}\n}\n.wheel1 {\n\tmargin: 2px 1px 0px 2px;\ntop: 5px;\n}\n.wheel1, .wheel2, .wheel3, .wheel4, .wheel5 {\n\tmargin: 0px 1px 0px 2px;\n\tborder: thin solid #000000;\n\tbackground-color: #EEEEEE;\n\twidth: 120px;\n\toverflow: hidden;\n\theight: 469px;\n\tposition: relative;\n\tfloat: left;\n}\n.spin img, .spin2 img {\n\tpadding: 7px 10px 0;\n\twidth: 100px;\n\theight: 95px;\n}\n#slot-view {\n\tborder: 2px ridge #990000;\n\tmargin: -1em auto 1em auto;\n\tposition: relative;\n\twidth: 626px;\n\theight: 455px;\n\tbackground-color: #E3E3FF;\n\tpadding-right: 2px;\n\tpadding-left: 2px;\n\toverflow: hidden;\n}\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: 0em auto 1em auto;\n\tborder: 5px solid #000000;\n\tfont-size: 1.5em;\n\tline-height: 1.5em;\n\ttext-align: center;\n}\n.play:hover {\n\tborder-color: #FF3300;\n\tbackground: #FFFF99;\n\tcursor: pointer;\ncolor: #999;\n}\n.ad-center {text-align: center; width: 80%; margin: 0 auto; border: position: relative; height: 130px;} \n<\/style>\n<div id=\"vp\">\n<p> Looking for FREE Non-Gambling Vegas Style Poker &#038;amp: Keno Games?<br \/> Try <a target=\"_blank\"  href=\"http:\/\/www.videopoker.com\/?u=8064\" onclick=\u201dtrackOutboundLink(\u2018http:\/\/www.videopoker.com\/?u=8064\u2019); return false;\">Video Poker.com<\/a><\/p>\n<\/p><\/div>\n<div class=\"ani-box\">\n<div id=\"slot-wrapper\">\n<div id=\"slot-view\">\n<div class=\"wheel1\">\n<div class=\"spin\">\n<div class=\"cross\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/cross.png\" alt=\"cross\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"lines\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/lines.png\" alt=\"lines\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"triangle\">  <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/triangle.png\" alt=\"triangle\" width=\"100\" height=\"100\" \/> <\/div>\n<div class=\"circle\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/circle.png\" alt=\"circle\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"square\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/square.png\" alt=\"square\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"diamond\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/diamond.png\" alt=\"diamond\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"pentagon\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/pentagon.png\" alt=\"pentagon\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"rectangle\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/rectangle.png\" alt=\"rectangle\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"hexagon\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/hexagon.png\" alt=\"hexagon\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"star\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/star.png\" alt=\"star\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"oval\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/oval.png\" alt=\"oval\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"cone\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/cone.png\" alt=\"cone\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"heart\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/heart.png\" alt=\"heart\" width=\"100\" height=\"100\" \/><\/div>\n<\/p><\/div>\n<div class=\"spin2\">\n<div class=\"cross\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/cross.png\" alt=\"cross\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"lines\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/lines.png\" alt=\"lines\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"triangle\">  <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/triangle.png\" alt=\"triangle\" width=\"100\" height=\"100\" \/> <\/div>\n<div class=\"circle\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/circle.png\" alt=\"circle\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"square\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/square.png\" alt=\"square\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"diamond\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/diamond.png\" alt=\"diamond\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"pentagon\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/pentagon.png\" alt=\"pentagon\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"rectangle\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/rectangle.png\" alt=\"rectangle\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"hexagon\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/hexagon.png\" alt=\"hexagon\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"star\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/star.png\" alt=\"star\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"oval\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/oval.png\" alt=\"oval\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"cone\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/cone.png\" alt=\"cone\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"heart\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/heart.png\" alt=\"heart\" width=\"100\" height=\"100\" \/><\/div>\n<\/p><\/div>\n<\/div>\n<p> <!-- Close Wheel One --><\/p>\n<div class=\"wheel2\">\n<div class=\"spin\">\n<div class=\"triangle\">  <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/triangle.png\" alt=\"triangle\" width=\"100\" height=\"100\" \/> <\/div>\n<div class=\"circle\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/circle.png\" alt=\"circle\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"square\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/square.png\" alt=\"square\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"diamond\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/diamond.png\" alt=\"diamond\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"pentagon\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/pentagon.png\" alt=\"pentagon\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"rectangle\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/rectangle.png\" alt=\"rectangle\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"cross\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/cross.png\" alt=\"cross\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"lines\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/lines.png\" alt=\"lines\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"hexagon\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/hexagon.png\" alt=\"hexagon\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"star\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/star.png\" alt=\"star\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"oval\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/oval.png\" alt=\"oval\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"cone\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/cone.png\" alt=\"cone\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"heart\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/heart.png\" alt=\"heart\" width=\"100\" height=\"100\" \/><\/div>\n<\/p><\/div>\n<div class=\"spin2\">\n<div class=\"triangle\">  <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/triangle.png\" alt=\"triangle\" width=\"100\" height=\"100\" \/> <\/div>\n<div class=\"circle\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/circle.png\" alt=\"circle\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"square\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/square.png\" alt=\"square\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"diamond\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/diamond.png\" alt=\"diamond\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"pentagon\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/pentagon.png\" alt=\"pentagon\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"rectangle\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/rectangle.png\" alt=\"rectangle\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"cross\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/cross.png\" alt=\"cross\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"lines\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/lines.png\" alt=\"lines\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"hexagon\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/hexagon.png\" alt=\"hexagon\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"star\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/star.png\" alt=\"star\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"oval\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/oval.png\" alt=\"oval\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"cone\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/cone.png\" alt=\"cone\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"heart\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/heart.png\" alt=\"heart\" width=\"100\" height=\"100\" \/><\/div>\n<\/p><\/div>\n<\/div>\n<p> <!-- Close Wheel TWO --><\/p>\n<div class=\"wheel3\">\n<div class=\"spin\">\n<div class=\"cone\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/cone.png\" alt=\"cone\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"heart\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/heart.png\" alt=\"heart\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"triangle\">  <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/triangle.png\" alt=\"triangle\" width=\"100\" height=\"100\" \/> <\/div>\n<div class=\"circle\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/circle.png\" alt=\"circle\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"square\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/square.png\" alt=\"square\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"diamond\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/diamond.png\" alt=\"diamond\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"pentagon\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/pentagon.png\" alt=\"pentagon\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"rectangle\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/rectangle.png\" alt=\"rectangle\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"cross\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/cross.png\" alt=\"cross\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"lines\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/lines.png\" alt=\"lines\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"hexagon\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/hexagon.png\" alt=\"hexagon\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"star\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/star.png\" alt=\"star\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"oval\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/oval.png\" alt=\"oval\" width=\"100\" height=\"100\" \/><\/div>\n<\/p><\/div>\n<div class=\"spin2\">\n<div class=\"cone\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/cone.png\" alt=\"cone\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"heart\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/heart.png\" alt=\"heart\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"triangle\">  <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/triangle.png\" alt=\"triangle\" width=\"100\" height=\"100\" \/> <\/div>\n<div class=\"circle\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/circle.png\" alt=\"circle\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"square\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/square.png\" alt=\"square\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"diamond\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/diamond.png\" alt=\"diamond\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"pentagon\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/pentagon.png\" alt=\"pentagon\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"rectangle\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/rectangle.png\" alt=\"rectangle\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"cross\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/cross.png\" alt=\"cross\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"lines\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/lines.png\" alt=\"lines\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"hexagon\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/hexagon.png\" alt=\"hexagon\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"star\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/star.png\" alt=\"star\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"oval\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/oval.png\" alt=\"oval\" width=\"100\" height=\"100\" \/><\/div>\n<\/p><\/div>\n<\/div>\n<p> <!-- Close Wheel THREE --><\/p>\n<div class=\"wheel4\">\n<div class=\"spin\">\n<div class=\"triangle\">  <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/triangle.png\" alt=\"triangle\" width=\"100\" height=\"100\" \/> <\/div>\n<div class=\"circle\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/circle.png\" alt=\"circle\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"square\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/square.png\" alt=\"square\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"diamond\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/diamond.png\" alt=\"diamond\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"pentagon\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/pentagon.png\" alt=\"pentagon\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"rectangle\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/rectangle.png\" alt=\"rectangle\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"cross\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/cross.png\" alt=\"cross\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"lines\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/lines.png\" alt=\"lines\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"hexagon\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/hexagon.png\" alt=\"hexagon\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"star\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/star.png\" alt=\"star\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"oval\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/oval.png\" alt=\"oval\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"cone\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/cone.png\" alt=\"cone\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"heart\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/heart.png\" alt=\"heart\" width=\"100\" height=\"100\" \/><\/div>\n<\/p><\/div>\n<div class=\"spin2\">\n<div class=\"triangle\">  <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/triangle.png\" alt=\"triangle\" width=\"100\" height=\"100\" \/> <\/div>\n<div class=\"circle\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/circle.png\" alt=\"circle\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"square\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/square.png\" alt=\"square\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"diamond\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/diamond.png\" alt=\"diamond\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"pentagon\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/pentagon.png\" alt=\"pentagon\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"rectangle\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/rectangle.png\" alt=\"rectangle\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"cross\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/cross.png\" alt=\"cross\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"lines\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/lines.png\" alt=\"lines\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"hexagon\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/hexagon.png\" alt=\"hexagon\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"star\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/star.png\" alt=\"star\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"oval\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/oval.png\" alt=\"oval\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"cone\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/cone.png\" alt=\"cone\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"heart\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/heart.png\" alt=\"heart\" width=\"100\" height=\"100\" \/><\/div>\n<\/p><\/div>\n<\/div>\n<p> <!-- Close Wheel FOUR --><\/p>\n<div class=\"wheel5\">\n<div class=\"spin\">\n<div class=\"star\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/star.png\" alt=\"star\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"cross\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/cross.png\" alt=\"cross\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"heart\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/heart.png\" alt=\"heart\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"lines\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/lines.png\" alt=\"lines\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"triangle\">  <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/triangle.png\" alt=\"triangle\" width=\"100\" height=\"100\" \/> <\/div>\n<div class=\"circle\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/circle.png\" alt=\"circle\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"square\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/square.png\" alt=\"square\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"pentagon\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/pentagon.png\" alt=\"pentagon\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"rectangle\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/rectangle.png\" alt=\"rectangle\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"hexagon\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/hexagon.png\" alt=\"hexagon\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"oval\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/oval.png\" alt=\"oval\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"cone\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/cone.png\" alt=\"cone\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"diamond\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/diamond.png\" alt=\"diamond\" width=\"100\" height=\"100\" \/><\/div>\n<\/p><\/div>\n<div class=\"spin2\">\n<div class=\"star\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/star.png\" alt=\"star\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"cross\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/cross.png\" alt=\"cross\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"heart\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/heart.png\" alt=\"heart\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"lines\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/lines.png\" alt=\"lines\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"triangle\">  <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/triangle.png\" alt=\"triangle\" width=\"100\" height=\"100\" \/> <\/div>\n<div class=\"circle\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/circle.png\" alt=\"circle\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"square\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/square.png\" alt=\"square\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"pentagon\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/pentagon.png\" alt=\"pentagon\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"rectangle\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/rectangle.png\" alt=\"rectangle\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"hexagon\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/hexagon.png\" alt=\"hexagon\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"oval\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/oval.png\" alt=\"oval\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"cone\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/cone.png\" alt=\"cone\" width=\"100\" height=\"100\" \/><\/div>\n<div class=\"diamond\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/diamond.png\" alt=\"diamond\" width=\"100\" height=\"100\" \/><\/div>\n<\/p><\/div>\n<\/div>\n<p> <!-- Close Wheel FIVE -->\n\t\t\t\t<\/div>\n<p> <!-- Close Slot-View -->\n\t\t\t<\/div>\n<p> <!-- Close Slot-Wrapper --><\/p>\n<div id=\"control-bar\">\n\t<button class=\"play tooltip\" title=\"Since this is CSS only for the Animation - the Slot wheels will always end up in the same place - JavaScript would be needed for the slot wheel randomization.\">SPIN<\/button>\n<\/div>\n<\/p><\/div>\n<p> <!-- Ani-box  --><\/p>\n<div class=\"below-ani\"> Observations of the digital slot machines show two style spinning wheels. The first or classic style (above) incorporates the rotation of the entire wheel. In a three wheel slot, each of the three individual wheels rotate, resembling the classic slot machine wheels.<\/div>\n<div class=\"below-ani\"> The second is only seen with a few digital slot manufacturers and involves the rotation of each image window. In a common five wheel slot each of the 20 individual image windows rotate separately. This style can be seen in the <a href=\"http:\/\/www.thingography.com\/css-slot-machine-2\/\">Slot Machine 2<br \/>\nCSS animation.<\/a> <\/div>\n<div class=\"below-ani\"> Both slot machine animations are accomplished using CSS3 animation. Java script is only used to restart the spinning function, as CSS is unable to &#8220;on click&#8221; restart animation at this time of development.\n<\/div>\n<div class=\"ad-center\">\n<div id=\"amzn-assoc-ad-67c2bc85-ab71-468f-8a1a-26d3884fdbc0\"><\/div>\n<p><script async src=\"\/\/z-na.amazon-adsystem.com\/widgets\/onejs?MarketPlace=US&#038;adInstanceId=67c2bc85-ab71-468f-8a1a-26d3884fdbc0\"><\/script><\/div>\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>Looking for FREE Non-Gambling Vegas Style Poker &#038;amp: Keno Games? Try<\/p>\n","protected":false},"author":2,"featured_media":2603,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,177,178,179],"class_list":["post-1671","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-css","tag-css-animation","tag-slot","tag-slot-machine","tag-slot-reels"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1671","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=1671"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1671\/revisions"}],"predecessor-version":[{"id":2904,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1671\/revisions\/2904"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2603"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=1671"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=1671"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=1671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}