How to use pure CSS to achieve the special effect of picking up draft beer (source code attached)-CSS Tutorial-php.cn

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

不言

Release： 2018-08-27 09:43:55

Original

2017 people have browsed it

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

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

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>

Copy after login

Centered display:

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

Copy after login

Define container size and common attributes of pseudo-elements:

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

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

Copy after login

Draw the wine barrel:

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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!