{"id":237,"date":"2023-08-06T21:04:55","date_gmt":"2023-08-06T15:34:55","guid":{"rendered":"https:\/\/www.acmeelectronicsindia.com\/blog\/?p=237"},"modified":"2023-08-08T23:35:01","modified_gmt":"2023-08-08T18:05:01","slug":"coffee-machine-animation-using-html-css","status":"publish","type":"post","link":"https:\/\/www.acmeelectronicsindia.com\/blog\/coffee-machine-animation-using-html-css\/","title":{"rendered":"Coffee Machine Animation Using HTML &#038; CSS"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.acmeelectronicsindia.com\/blog\/wp-content\/uploads\/2023\/08\/coffeemachine_animation.jpeg\" alt=\"\" class=\"wp-image-238\" width=\"832\" height=\"584\" srcset=\"https:\/\/www.acmeelectronicsindia.com\/blog\/wp-content\/uploads\/2023\/08\/coffeemachine_animation.jpeg 832w, https:\/\/www.acmeelectronicsindia.com\/blog\/wp-content\/uploads\/2023\/08\/coffeemachine_animation-300x211.jpeg 300w, https:\/\/www.acmeelectronicsindia.com\/blog\/wp-content\/uploads\/2023\/08\/coffeemachine_animation-768x539.jpeg 768w, https:\/\/www.acmeelectronicsindia.com\/blog\/wp-content\/uploads\/2023\/08\/coffeemachine_animation-340x240.jpeg 340w\" sizes=\"auto, (max-width: 832px) 100vw, 832px\" \/><\/figure>\n\n\n\n<p><strong>This Code Displays Coffee Machine Animation Using HTML &amp; CSS.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;head&gt;\n&lt;style&gt;\n.container {\n  width: 300px;\n  height: 280px;\n  position: absolute;\n  top: calc(50% - 140px);\n  left: calc(50% - 150px);\n}\n.coffee-header {\n  width: 100%;\n  height: 80px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: #ddcfcc;\n  border-radius: 10px;\n}\n.coffee-header__buttons {\n  width: 25px;\n  height: 25px;\n  position: absolute;\n  top: 25px;\n  background-color: #882323;\n  border-radius: 50%;\n}\n.coffee-header__buttons::after {\n  content: \"\";\n  width: 8px;\n  height: 8px;\n  position: absolute;\n  bottom: -8px;\n  left: calc(50% - 4px);\n  background-color: #615e5e;\n}\n.coffee-header__button-one {\n  left: 15px;\n}\n.coffee-header__button-two {\n  left: 50px;\n}\n.coffee-header__display {\n  width: 50px;\n  height: 50px;\n  position: absolute;\n  top: calc(50% - 25px);\n  left: calc(50% - 25px);\n  border-radius: 50%;\n  background-color: #b4a5da;\n  border: 5px solid #6e3bf4;\n  box-sizing: border-box;\n  animation: bcolor 4s 4s linear infinite;\n}\n.coffee-header__details {\n  width: 8px;\n  height: 20px;\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  background-color: #882323;\n  box-shadow: -12px 0 0 #882323, -24px 0 0 #882323;\n}\n.coffee-medium {\n  width: 90%;\n  height: 160px;\n  position: absolute;\n  top: 80px;\n  left: calc(50% - 45%);\n  background-color: #bcb0af;\n}\n.coffee-medium:before {\n  content: \"\";\n  width: 90%;\n  height: 100px;\n  background-color: #776f6e;\n  position: absolute;\n  bottom: 0;\n  left: calc(50% - 45%);\n  border-radius: 20px 20px 0 0;\n}\n.coffe-medium__exit {\n  width: 60px;\n  height: 20px;\n  position: absolute;\n  top: 0;\n  left: calc(50% - 30px);\n  background-color: #231f20;\n}\n.coffe-medium__exit::before {\n  content: \"\";\n  width: 50px;\n  height: 20px;\n  border-radius: 0 0 50% 50%;\n  position: absolute;\n  bottom: -20px;\n  left: calc(50% - 25px);\n  background-color: #231f20;\n}\n.coffe-medium__exit::after {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  position: absolute;\n  bottom: -30px;\n  left: calc(50% - 5px);\n  background-color: #831f20;\n}\n.coffee-medium__arm {\n  width: 70px;\n  height: 20px;\n  position: absolute;\n  top: 15px;\n  right: 25px;\n  background-color: #831f20;\n}\n.coffee-medium__arm::before {\n  content: \"\";\n  width: 15px;\n  height: 5px;\n  position: absolute;\n  top: 7px;\n  left: -15px;\n  background-color: #882323;\n}\n.coffee-medium__cup {\n  width: 80px;\n  height: 47px;\n  position: absolute;\n  bottom: 0;\n  left: calc(50% - 40px);\n  background-color: #FF3371;\n  border-radius: 0 0 70px 70px \/ 0 0 110px 110px;\n}\n.coffee-medium__cup::after {\n  content: \"\";\n  width: 20px;\n  height: 20px;\n  position: absolute;\n  top: 6px;\n  right: -13px;\n  border: 5px solid #FF3371;\n  border-radius: 50%;\n}\n\n@keyframes bcolor {\n  0% {\n    background-color: #b4a5da;\n    border: 5px solid #6e3bf4;\n  }\n  5% {\n    background-color: #b4a5da;\n    border: 5px solid #6e3bf4;\n  }\n  20% {\n    background-color: #6dee5d;\n    border: 5px solid green;\n  }\n  95% {\n    background-color: #6dee5d;\n    border: 5px solid green;\n  }\n  100% {\n    background-color: #6dee5d;\n    border: 5px solid green;\n  }\n}\n\n\n@keyframes liquid {\n  0% {\n    height: 0px;  \n    opacity: 1;\n  }\n  5% {\n    height: 0px;  \n    opacity: 1;\n  }\n  20% {\n    height: 62px;  \n    opacity: 1;\n  }\n  95% {\n    height: 62px;\n    opacity: 1;\n  }\n  100% {\n    height: 62px;\n    opacity: 0;\n  }\n}\n\n\n.coffee-medium__liquid {\n  width: 6px;\n  height: 63px;\n  opacity: 0;\n  position: absolute;\n  top: 50px;\n  left: calc(50% - 3px);\n  background-color: #74372b;\n  animation: liquid 4s 4s linear infinite;\n}\n.coffee-medium__smoke {\n  width: 8px;\n  height: 20px;\n  position: absolute;  \n  border-radius: 5px;\n  background-color: #b3aeae;\n}\n@keyframes smokeOne {\n  0% {\n    bottom: 20px;\n    opacity: 0;\n  }\n  40% {\n    bottom: 50px;\n    opacity: .5;\n  }\n  80% {\n    bottom: 80px;\n    opacity: .3;\n  }\n  100% {\n    bottom: 80px;\n    opacity: 0;\n  }\n}\n@keyframes smokeTwo {\n  0% {\n    bottom: 40px;\n    opacity: 0;\n  }\n  40% {\n    bottom: 70px;\n    opacity: .5;\n  }\n  80% {\n    bottom: 80px;\n    opacity: .3;\n  }\n  100% {\n    bottom: 80px;\n    opacity: 0;\n  }\n}\n.coffee-medium__smoke-one {\n  opacity: 0;\n  bottom: 50px;\n  left: 102px;\n  animation: smokeOne 3s 4s linear infinite;\n}\n.coffee-medium__smoke-two {\n  opacity: 0;\n  bottom: 70px;\n  left: 118px;\n  animation: smokeTwo 3s 5s linear infinite;\n}\n.coffee-medium__smoke-three {\n  opacity: 0;\n  bottom: 65px;\n  right: 118px;\n  animation: smokeTwo 3s 6s linear infinite;\n}\n.coffee-medium__smoke-for {\n  opacity: 0;\n  bottom: 50px;\n  right: 102px;\n  animation: smokeOne 3s 5s linear infinite;\n}\n.coffee-footer {\n  width: 95%;\n  height: 15px;\n  position: absolute;\n  bottom: 25px;\n  left: calc(50% - 47.5%);\n  background-color: #6e3bf4;\n  border-radius: 10px;\n}\n.coffee-footer::after {\n  content: \"\";\n  width: 106%;\n  height: 26px;\n  position: absolute;\n  bottom: -25px;\n  left: -8px;\n  background-color: #000;\n}\n\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div class=\"container\"&gt;\n    &lt;div class=\"coffee-header\"&gt;\n      &lt;div class=\"coffee-header__buttons coffee-header__button-one\"&gt;&lt;\/div&gt;\n      &lt;div class=\"coffee-header__buttons coffee-header__button-two\"&gt;&lt;\/div&gt;\n      &lt;div class=\"coffee-header__display\"&gt;&lt;\/div&gt;\n      &lt;div class=\"coffee-header__details\"&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"coffee-medium\"&gt;\n      &lt;div class=\"coffe-medium__exit\"&gt;&lt;\/div&gt;\n      &lt;div class=\"coffee-medium__arm\"&gt;&lt;\/div&gt;\n      &lt;div class=\"coffee-medium__liquid\"&gt;&lt;\/div&gt;\n      &lt;div class=\"coffee-medium__smoke coffee-medium__smoke-one\"&gt;&lt;\/div&gt;\n      &lt;div class=\"coffee-medium__smoke coffee-medium__smoke-two\"&gt;&lt;\/div&gt;\n      &lt;div class=\"coffee-medium__smoke coffee-medium__smoke-three\"&gt;&lt;\/div&gt;\n      &lt;div class=\"coffee-medium__smoke coffee-medium__smoke-for\"&gt;&lt;\/div&gt;\n      &lt;div class=\"coffee-medium__cup\"&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"coffee-footer\"&gt;&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>This Code Displays Coffee Machine Animation Using HTML &amp; CSS.<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[27],"class_list":["post-237","post","type-post","status-publish","format-standard","hentry","category-html-css-javascript","tag-html-css-animation"],"_links":{"self":[{"href":"https:\/\/www.acmeelectronicsindia.com\/blog\/wp-json\/wp\/v2\/posts\/237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.acmeelectronicsindia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.acmeelectronicsindia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.acmeelectronicsindia.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.acmeelectronicsindia.com\/blog\/wp-json\/wp\/v2\/comments?post=237"}],"version-history":[{"count":2,"href":"https:\/\/www.acmeelectronicsindia.com\/blog\/wp-json\/wp\/v2\/posts\/237\/revisions"}],"predecessor-version":[{"id":240,"href":"https:\/\/www.acmeelectronicsindia.com\/blog\/wp-json\/wp\/v2\/posts\/237\/revisions\/240"}],"wp:attachment":[{"href":"https:\/\/www.acmeelectronicsindia.com\/blog\/wp-json\/wp\/v2\/media?parent=237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.acmeelectronicsindia.com\/blog\/wp-json\/wp\/v2\/categories?post=237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.acmeelectronicsindia.com\/blog\/wp-json\/wp\/v2\/tags?post=237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}