{"id":1609,"date":"2018-03-02T18:46:41","date_gmt":"2018-03-02T18:46:41","guid":{"rendered":"http:\/\/thingography.com\/?p=1609"},"modified":"2019-02-19T00:49:47","modified_gmt":"2019-02-19T00:49:47","slug":"css-jack","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-jack\/","title":{"rendered":"Jack O&#8217; Lantern Pure CSS Animation"},"content":{"rendered":"<style>\n.ani-box {height: 550px; width: 100%;\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='M82.42 180h-1.415L0 98.995v-2.827L6.167 90 0 83.833V81.004L81.005 0h2.827L90 6.167 96.167 0H98.996L180 81.005v2.827L173.833 90 180 96.167V98.996L98.995 180h-2.827L90 173.833 83.833 180H82.42zm0-1.414L1.413 97.58 8.994 90l-7.58-7.58L82.42 1.413 90 8.994l7.58-7.58 81.006 81.005-7.58 7.58 7.58 7.58-81.005 81.006-7.58-7.58-7.58 7.58zM175.196 0h-25.832c1.033 2.924 2.616 5.59 4.625 7.868C152.145 9.682 151 12.208 151 15c0 5.523 4.477 10 10 10 1.657 0 3 1.343 3 3v4h16V0h-4.803c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6s-6-2.686-6-6c0-1.093.292-2.117.803-3h10.394-13.685C161.18.938 161 1.948 161 3v4c-4.418 0-8 3.582-8 8s3.582 8 8 8c2.76 0 5 2.24 5 5v2h4v-4h2v4h4v-4h2v4h2V0h-4.803zm-15.783 0c-.27.954-.414 1.96-.414 3v2.2c-1.25.254-2.414.74-3.447 1.412-1.716-1.93-3.098-4.164-4.054-6.612h7.914zM180 17h-3l2.143-10H180v10zm-30.635 163c-.884-2.502-1.365-5.195-1.365-8 0-13.255 10.748-24 23.99-24H180v32h-30.635zm12.147 0c.5-1.416 1.345-2.67 2.434-3.66l-1.345-1.48c-1.498 1.364-2.62 3.136-3.186 5.14H151.5c-.97-2.48-1.5-5.177-1.5-8 0-12.15 9.84-22 22-22h8v30h-18.488zm13.685 0c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 148h8.01C21.26 148 32 158.742 32 172c0 2.805-.48 5.498-1.366 8H0v-32zm0 2h8c12.15 0 22 9.847 22 22 0 2.822-.53 5.52-1.5 8h-7.914c-.567-2.004-1.688-3.776-3.187-5.14l-1.346 1.48c1.09.99 1.933 2.244 2.434 3.66H0v-30zm15.197 30c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 32h16v-4c0-1.657 1.343-3 3-3 5.523 0 10-4.477 10-10 0-2.794-1.145-5.32-2.992-7.134C28.018 5.586 29.6 2.924 30.634 0H0v32zm0-2h2v-4h2v4h4v-4h2v4h4v-2c0-2.76 2.24-5 5-5 4.418 0 8-3.582 8-8s-3.582-8-8-8V3c0-1.052-.18-2.062-.512-3H0v30zM28.5 0c-.954 2.448-2.335 4.683-4.05 6.613-1.035-.672-2.2-1.16-3.45-1.413V3c0-1.04-.144-2.046-.414-3H28.5zM0 17h3L.857 7H0v10zM15.197 0c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6S4 6.314 4 3c0-1.093.292-2.117.803-3h10.394zM109 115c-1.657 0-3 1.343-3 3v4H74v-4c0-1.657-1.343-3-3-3-5.523 0-10-4.477-10-10 0-2.793 1.145-5.318 2.99-7.132C60.262 93.638 58 88.084 58 82c0-13.255 10.748-24 23.99-24h16.02C111.26 58 122 68.742 122 82c0 6.082-2.263 11.636-5.992 15.866C117.855 99.68 119 102.206 119 105c0 5.523-4.477 10-10 10zm0-2c-2.76 0-5 2.24-5 5v2h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-2c0-2.76-2.24-5-5-5-4.418 0-8-3.582-8-8s3.582-8 8-8v-4c0-2.64 1.136-5.013 2.946-6.66L72.6 84.86C70.39 86.874 69 89.775 69 93v2.2c-1.25.254-2.414.74-3.447 1.412C62.098 92.727 60 87.61 60 82c0-12.15 9.84-22 22-22h16c12.15 0 22 9.847 22 22 0 5.61-2.097 10.728-5.55 14.613-1.035-.672-2.2-1.16-3.45-1.413V93c0-3.226-1.39-6.127-3.6-8.14l-1.346 1.48C107.864 87.987 109 90.36 109 93v4c4.418 0 8 3.582 8 8s-3.582 8-8 8zM90.857 97L93 107h-6l2.143-10h1.714zM80 99c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm20 0c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6z' fill='%23ded9df' fill-opacity='0.35' fill-rule='evenodd'\/%3E%3C\/svg%3E\");}\n#jack-box  {\n\twidth: 800px;\n\theight: 600px;\n\tmargin: 2em auto -1.2em auto;\n\tposition: relative;\nbox-sizing: content-box;\n\/* =========== Original size was too Large ============ *\/\n\ttransform: scale(0.8);\n        transform-origin: center top;\n}\n@media screen and (max-width: 720px) {\n    #jack-box {transform: scale(0.6); transform-origin: left top;}\n}\n@media screen and (max-width: 500px) {\n    #jack-box {transform: scale(0.4); transform-origin: left top;}\n}\n@media screen and (max-width: 320px) {\n    #jack-box {transform: scale(0.4); transform-origin: left top;}\n}\n.stem {\n\tborder: 1px ridge #000000;\n\tmargin-left: -25px;\n\tposition: absolute;\n\ttop: -52px;\n\tleft: 50%;\n\theight: 60px;\n\twidth: 50px;\n\tborder-radius: 10px 5px 0 0;\n\tbackground-color: #654321;\n\tbackground-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%), linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%), linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%), linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);\n\tbackground-size: 13px, 29px, 37px, 53px;\n}\n.shape  {\n\tmargin-right: auto;\n\tmargin-left: auto;\n\twidth: 750px;\n\theight: 575px;\n\tmargin-top: 13px;\n\tbackground-color: #CC6600;\n\tborder-radius: 350px 350px 350px 350px;\n\tbox-shadow: 0px 0px 0px 8px #000000, 0px 0px 8px 2px #000000 inset;\n}\n\/*  ======== The Pumpkin's Verticle Lines or RIBS ======== *\/\n#lines {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n}\n.curve1, .curve2, .curve3, .curve4, .curve5, .curve6  {\n\tborder-style: hidden hidden hidden solid;\n\twidth: 750px;\n\theight: 575px;\n\tborder-width: 1px;\n\tborder-color: none none none #666666;\n\tborder-radius: 400px 0 0 400px;\n\tmargin-top: 0px;\n\tposition: absolute;\n\tleft: 80px;\n\topacity: 0.3;\n\tbox-shadow: -6px 0px 55px -6px #666;\n}\n.curve1, .curve2 {\n\tbox-shadow: none;\n}\n.curve2 {\n\ttransform: rotateY(45deg);\n}\n.curve3 {\n\ttransform: rotateY(80deg);\n\tleft: 40px;\n}\n.curve4 {\n\ttransform: rotateY(105deg);\n\tleft: 40px\n}\n.curve5 {\n\ttransform: rotateY(120deg);\n}\n.curve6 {\n\ttransform: rotateY(140deg);\n}\n\/* =========  The Eyes ========= *\/\n.eyes  {\n\twidth: 400px;\n\theight: 100px;\n\tposition: absolute;\n\tmargin-left: -200px;\n\tleft: 50%;\n\ttop: 125px;\n}\n.leye, .reye  {\n\tborder: 3px solid #000000;\n\tfloat: left;\n\twidth: 150px;\n\theight: 60px;\n\tbackground: #535353;\n\tborder-radius: 100px \/ 50px;\n}\n.reye  {\n\tfloat: right;\n}\n.pupil  {\n\tmargin: 5px auto 0px auto;\n\twidth: 50px;\n\theight: 50px;\n\tposition: relative;\n\tbackground-color: #000000;\n\tborder-radius: 25px;\n\tanimation: side1 10.0s infinite linear;\n}\n.iris  {\n\tpadding: 0px;\n\tmargin: 0px auto 0px auto;\n\twidth: 20px;\n\theight:20px;\n\tbackground-color: #CC6600;\n\tborder-radius: 10px;\n\tposition: relative;\n\ttop: 15px;\n\tanimation: side2 6.0s infinite linear;\n}\n\/*  ========= The Nose ========= *\/\n.nose  {\n\tmargin-left: -38px;\n\twidth: 0px;\n\theight: 0px;\n\tposition: absolute;\n\tborder-style: solid;\n\tborder-width: 0 50px 75px 50px;\n\tborder-color: transparent transparent #000000;\n\tmargin-top: -325px;\n\tleft: 50%;\n}\n\/* =========  The Mouth and Teeth  ========= *\/\n.mouth  {\n\tborder-style: hidden hidden solid hidden;\n\twidth: 500px;\n\theight: 200px;\n\tborder-width: 100px;\n\tborder-color: none none #333333 none;\n\tborder-radius: 0 0 150px 150px;\n\tmargin-top: 0px;\n\tposition: absolute;\n\tbackground:transparent;\n\tmargin-left: -250px;\n\tleft: 50%;\n\ttop: 220px;\nbox-sizing: content-box;\n\tanimation: mouth 3.0s infinite linear;\n}\n.top  {\n\tmargin: 199px 0px 0px -135px;\n\twidth: 270px;\n\theight: 25px;\n\tposition: absolute;\n\topacity: 0.9;\n\tleft: 50%;\nbox-sizing: content-box;\n}\n.teeth1, .teeth2, .teeth3, .teeth4, .teeth5, .teeth6, .teeth7, .teeth8, .teeth9  {\n\twidth: 0px;\n\theight: 0px;\n\tborder-style: solid;\n\tborder-width: 25px 15px 0 15px;\n\tborder-color: #CC6600 transparent transparent;\n\tborder-style: solid;\n\tposition: relative;\n\tmargin-left: 0px;\n\tfloat: left;\n}\n.bottom  {\n\twidth: 300px;\n\theight: 25px;\n\tposition: absolute;\n\tbottom: -100px;\n\tleft: 50%;\n\tmargin-left: -150px;\n\topacity: 0.9;\n\tanimation: teeth 3.0s infinite linear;\n}\n.tooth1, .tooth2, .tooth3, .tooth4, .tooth5, .tooth6, .tooth7, .tooth8, .tooth9, .tooth10  {\n\twidth: 0px;\n\theight: 0px;\n\tborder-style: solid;\n\tborder-width: 0 15px 25px 15px;\n\tborder-color: transparent transparent #CC6600; \t\n\tborder-style: solid;\n\tposition: relative;\n\tmargin-left: 0px;\n\tfloat: left;\n}\n\/* =====  Animation to move the pupil left to right =====  *\/\n@keyframes side1 {\n\t0%  {margin-left:10px;}\n\t50% {margin-left:90px;}\n\t100%{margin-left:10px;}\n}\n\/*  Animation to move the center of the eye a little - for added following the viewer effect  *\/\n@keyframes side2 {\n\t0%  {margin-left:20px;}\n\t50% {margin-left:10px;}\n\t100%{margin-left:20px;}\n}\n\/*  ===== animation to move the mouth ===== *\/\n@keyframes mouth {\n\t0%  {border-width: 100px; border-radius: 0 0 150px 150px;}\n\t50% {border-width:  30px; border-radius: 0 0 120px 120px;}\n\t100%{border-width: 100px; border-radius: 0 0 150px 150px;}\n}<\/p>\n<p>\/* =====  animation to move the bottom teeth with the mouth  ===== *\/\n@keyframes teeth {\n\t0%  {bottom:-100px;}\n\t50% {bottom: -31px;}\n\t100%{bottom:-100px;}\n}\n<\/style>\n<div class=\"ani-box\">\n<div id=\"jack-box\">\n<div class=\"stem\"><\/div>\n<div class=\"shape\">\n<div class=\"curve1\"><\/div>\n<div class=\"curve2\"><\/div>\n<div class=\"curve3\"><\/div>\n<div class=\"curve4\"><\/div>\n<div class=\"curve5\"><\/div>\n<div class=\"curve6\"><\/div>\n<\/p><\/div>\n<p><!-- Close Outline --><\/p>\n<div class=\"eyes\">\n<div class=\"leye\">\n<div class=\"pupil\">\n<div class=\"iris\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"reye\">\n<div class=\"pupil\">\n<div class=\"iris\"><\/div>\n<\/p><\/div>\n<p>  <!-- Close Pupil -->\n\t\t\t\t\t<\/div>\n<p>  <!-- Close Reye (right eye) -->\n\t\t\t\t<\/div>\n<p> <!-- Close Eyes --><\/p>\n<div class=\"nose\"><\/div>\n<div class=\"mouth\">\n<div class=\"top\">\n<div class=\"teeth1\"><\/div>\n<div class=\"teeth2\"><\/div>\n<div class=\"teeth3\"><\/div>\n<div class=\"teeth4\"><\/div>\n<div class=\"teeth5\"><\/div>\n<div class=\"teeth6\"><\/div>\n<div class=\"teeth7\"><\/div>\n<div class=\"teeth8\"><\/div>\n<div class=\"teeth9\"><\/div>\n<\/p><\/div>\n<p>  <!-- Close Top Teeth --><\/p>\n<div class=\"bottom\">\n<div class=\"tooth1\"><\/div>\n<div class=\"tooth2\"><\/div>\n<div class=\"tooth3\"><\/div>\n<div class=\"tooth4\"><\/div>\n<div class=\"tooth5\"><\/div>\n<div class=\"tooth6\"><\/div>\n<div class=\"tooth7\"><\/div>\n<div class=\"tooth8\"><\/div>\n<div class=\"tooth9\"><\/div>\n<div class=\"tooth10\"><\/div>\n<\/p><\/div>\n<p>  <!-- Close Bottom Tooth -->\n\t\t\t\t<\/div>\n<p> <!-- Close Mouth --><\/p><\/div>\n<p><!-- Close Box --><\/p>\n<\/div>\n<p> <!-- Close  Ani  --><\/p>\n<h3 class=\"below-ani\">An Animated Jack-O-Lantern Pumpkin made completely with CSS.  <\/h3>\n","protected":false},"excerpt":{"rendered":"<p>An Animated Jack-O-Lantern Pumpkin made completely with CSS.<\/p>\n","protected":false},"author":2,"featured_media":2592,"comment_status":"open","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,172,173],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1609"}],"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=1609"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1609\/revisions"}],"predecessor-version":[{"id":2885,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1609\/revisions\/2885"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2592"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=1609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=1609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=1609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}