How to use pure CSS to achieve the special effect of picking up draft beer (source code attached)

The content of this article is about how to use pure CSS to achieve the special effects of draft beer (source code attached). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

Effect preview

Source code download

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

Code Interpretation

Define dom, the container contains a .keg element representing a wine barrel and a .glass element representing a beer glass . The wine barrel has 2 sub-elements, .handle represents the handle, .pipe represents the outlet pipe, and the wine glass has 1 sub-element .beer:

<div>
    <div>
        <span></span>
        <span></span>
    </div>
    <div>
        <span></span>
    </div>
</div>

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    background: linear-gradient(
        lightslategray 300px,
        #333 300px
    );
}

Define container size and common attributes of pseudo-elements:

.container {
    width: 700px;
    height: 300px;
    position: relative;
}

.container *::before,
.container *::after {
    content: '';
    position: absolute;
}

Draw the wine barrel:

.keg {
    position: absolute;
    width: 90px;
    height: 200px;
    background: linear-gradient(
        to right,
        #777 70px,
        #555 70px
    );
    bottom: 0;
    left: 310px;
}

Draw the water pipe and it The stand:

.keg .pipe {
    position: absolute;
    width: 10px;
    height: 40px;
    background-color: #ccc;
    top: 33px;
    left: 10px;
}

.keg .pipe::before {
    width: 40px;
    height: 20px;
    background: 
        radial-gradient(
            circle at 10px 10px,
            #eee 7px,
            #ccc 7px, #ccc 10px,
            transparent 10px
        ),
        linear-gradient(
            #ccc 50%,
            #999 50%
        );
    border-radius: 10px;
    top: -2px;
    left: -5px;
}

Draw the handle:

.keg .handle {
    position: absolute;
    border-style: solid;
    border-width: 50px 10px 0 10px;
    border-color: black transparent transparent transparent;
    top: -10px;
    left: 5px;
}

.keg .handle::before {
    width: 20px;
    height: 10px;
    background-color: #ccc;
    top: -60px;
    left: -10px;
    border-radius: 5px 5px 0 0;
}

.keg .handle::after {
    width: 10px;
    height: 20px;
    background-color: #ccc;
    top: -20px;
    left: -5px;
}

Draw the wine glass:

.glass {
    position: absolute;
    width: 70px;
    height: 100px;
    color: rgba(255, 255, 255, 0.3);
    background-color: currentColor;
    bottom: 0;
    left: 300px;
    border-radius: 5px;
}

.glass::before {
    width: 50px;
    height: 40px;
    border: 10px solid;
    top: 20px;
    right: -20px;
    border-radius: 0 40% 40% 0;
    clip-path: inset(0 0 0 72%);
}

Draw the beer and foam in the glass:

.beer {
    position: absolute;
    width: 60px;
    height: 80px;
    background-color: rgba(255, 206, 84, 0.8);
    bottom: 15px;
    left: 5px;
    border-radius: 0 0 5px 5px;
    border-top: solid rgba(255, 206, 84, 0.8);
}

.beer::before {
    width: inherit;
    height: 15px;
    background-color: #eee;
    top: -15px;
    border-radius: 5px 5px 0 0;
}

Next Make animations.

Add the animation effect of the wine glass handle being pressed down:

.keg .handle {
    transform-origin: center 50px;
    animation: handle 5s infinite;
}

@keyframes handle {
    10%, 60% {
        transform: rotate(0deg);
    }

    20%, 50% {
        transform: rotate(-90deg);
    }
}

Add the animation effect of the beer being filled:

.beer {
    animation: fillup 5s infinite;
}

@keyframes fillup {
    0%, 20% {
        height: 0px;
        border-width: 0px;
    }

    40% {
        height: 40px;
    }

    80%, 100% {
        height: 80px;
        border-width: 5px;
    }
}

Add the animation effect of the beer foam rising:

.beer::before {
    animation: 
        wave 0.5s infinite alternate,
        fillup-foam 5s linear infinite;
}

@keyframes fillup-foam {
    0%, 20% {
        top: 0;
        height: 0;
    }

    60%, 100% {
        top: -15px;
        height: 15px;
    }
}

@keyframes wave {
    from {
        transform: skewY(-3deg);
    }

    to {
        transform: skewY(3deg);
    }
}

Increase the effect of beer flowing from the spout:

.keg .pipe::after {
    width: 10px;
    background-color: rgba(255, 206, 84, 0.5);
    animation: flow 5s infinite;
}

@keyframes flow {
    0%, 15% {
        top: 40px;
        height: 0;
    }

    20% {
        height: 115px;
    }

    40% {
        height: 75px;
    }

    55% {
        top: 40px;
        height: 50px;
    }

    60%, 100% {
        top: 80px;
        height: 0;
    }
}

Finally, increase the effect of the glass sliding:

.glass {
    animation: slide 5s ease infinite;
}

@keyframes slide {
    0% {
        left: 0;
        filter: opacity(0);
    }

    20%, 80% {
        left: 300px;
        filter: opacity(1);
    }

    100% {
        left: 600px;
        filter: opacity(0);
    }
}

Done!

Related recommendations:

How to use pure CSS to implement an hourglass animation effect

How to use CSS and D3 to implement a set of lanterns (with code )

The above is the detailed content of How to use pure CSS to achieve the special effect of picking up draft beer (source code attached). For more information, please follow other related articles on the PHP Chinese website!