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

This article mainly introduces how to use pure CSS to achieve the effect of a coffee machine. It has certain reference value. Now I share it with you. Friends in need can refer to it

Source code download

Please download all the source code of the daily front-end practical series from github:

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

Code Interpretation

Define dom, the container contains the body, water outlet, coffee cup, button and coffee:

<p>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</p>

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right bottom, sandybrown, darkred);
}

Define the container size:

.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 the water outlet:

.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 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;
}

Use pseudo elements to draw the handle of the coffee cup:

.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);
}

Next, polish it up.

Add light and shadow 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);
}

Define the first half of the coffee flow animation, that is, the coffee flows from the outlet 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, that is, the coffee outlet stops flowing out, 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 entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use pure CSS to achieve the effect of a color card

How to use CSS to implement a single element lattice loader Effect

The above is the detailed content of How to use pure CSS to achieve the effect of a coffee machine. For more information, please follow other related articles on the PHP Chinese website!