How to use pure CSS to realize the effect of a coffee machine

This article mainly describes how to use pure CSS to achieve a coffee machine effect, has a certain reference value, now share to everyone, have the need for friends can refer to

Source code Download

The full source code of the daily Front end Combat series is available from GitHub:

Https://github.com/comehope/front-end-daily-challenges

Code interpretation

Defines the DOM, which contains the body, outlet, coffee cup, Button, and coffee:

<p class= "Coffee-machine" >    <span class= "Body" ></span>    <span class= "spout" ></ span>    <span class= "Cup" ></span>    <span class= "button" ></span>    <span class= "Coffee" ></span></p>

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;    Background:linear-gradient (to right bottom, sandybrown, darkred);}

Define Container Dimensions:

. coffee-machine {    width:15em;    height:15em;    Background-color:white;    font-size:20px;    border-radius:50%;    Border:2em solid White;}

Draw the outer frame of the body:

. coffee-machine {    position:relative;    Display:flex;    Justify-content:center;}. body {    position:absolute;    Width:8em;    Height:12em;    Background-color:sandybrown;    Border-radius:1.2em;    top:1.5em;    Border-right:0.6em solid Peru;}

Use pseudo-elements to draw the middle part of the body:

. body::after {    content: ';    Position:absolute;    Width:8em;    Height:8em;    Background-color:darkslategray;    Top:2em;    Border-right:0.6em solid black;}

Draw a spout:

. spout {    position:absolute;    Width:3em;    Height:1em;    Background-color:white;    top:3.5em;    border-radius:0.5em;    Border-right:0.5em solid silver;}

Draw the cup body of the coffee cup:

. Cup {    position:absolute;    Width:3em;    Height:2em;    Background-color:white;    bottom:3.5em;    border-radius:0 0 1.4em 1.4em;    Border-right:0.5em solid silver;}

Draw the handle of the coffee cup with pseudo elements:

. cup::after {    content: ';    Position:absolute;    Width:0.6em;    Height:0.6em;    Border:0.3em solid silver;    border-radius:50%;    Right: -1.2em;    Top:0.2em;}

Draw the button:

. button {    position:absolute;    Width:1.2em;    Height:1.2em;    Background-color:tomato;    border-radius:50%;    Bottom:2em;    Right:4.5em;}

Draw the coffee:

. coffee::before,.coffee::after {    content: ';    Position:absolute;    Width:0.7em;    height:5em;    Background-color:chocolate;    top:4.5em;    Left:calc ((15EM-0.7EM)/2);}

Then polish it.

Add light and shade to the coffee machine:

. coffee-machine {    z-index:1;}. Coffee-machine::before,.coffee-machine::after {    content: ';    Position:absolute;    Width:2em;    Height:2em;    Border:0.3em solid transparent;    Z-index:2;    border-radius:50%;    Border-left-color:white;    Left:3.8em;}. Coffee-machine::before {    top:1.8em;    Transform:rotate (40deg);}. coffee-machine::after {    bottom:1.8em;    Transform:rotate ( -40deg);}

Defines the first half of the flow of coffee, where the coffee flows from the spout to the Cup:

. coffee::before {    animation:2s linear infinite;    Animation-name:pouring-before;    Transform-origin:top;} @keyframes Pouring-before {    0, 20% {        Transform:scaley (0);    }    30%, 100% {        Transform:scaley (1);    }    70%, 100% {        visibility:hidden;    }}

Define the second half of the coffee flow animation, i.e. the outlet stops leaving the coffee and the remaining coffee flows into the Cup:

. coffee::after {    animation:2s linear infinite;    Animation-name:pouring-after;    Transform-origin:bottom;} @keyframes Pouring-after {    0, 70% {        visibility:hidden;        Transform:scaley (1);    }    80%, 100% {        Transform:scaley (0);    }}

Done!

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!