Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use pure CSS to achieve the special effects of draft beer, with a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

Code interpretation

Define dom, and the container contains a .keg element for a barrel and a .glass element for a beer mug. The barrel has two child elements, .handle represents the handle, .pipe represents the outlet pipe, and the glass has one child element that represents beer. Beer:

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Justify-content:center

Background:linear-gradient (

Lightslategray300px

# 333300px

)

}

Define the common attributes of container dimensions and pseudo elements:

.container {

Width:700px

Height:300px

Position:relative

}

.container *:: before

.container *:: after {

Content:''

Position:absolute

}

Draw the barrel:

.keg {

Position:absolute

Width:90px

Height:200px

Background:linear-gradient (

Toright

# 77770px

# 55570px

)

Bottom:0

Left:310px

}

Draw the outlet pipe and its bracket:

.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 (

Circleat10px10px

# eee7px

# ccc7px,#ccc10px

Transparent10px

),

Linear-gradient (

# ccc50%

# 99950%

)

Border-radius:10px

Top:-2px

Left:-5px

}

Draw the handle:

.keg.handle {

Position:absolute

Border-style:solid

Border-width:50px10px010px

Border-color:blacktransparenttransparenttransparent

Top:-10px

Left:5px

}

.keg.handle:: before {

Width:20px

Height:10px

Background-color:#ccc

Top:-60px

Left:-10px

Border-radius:5px5px00

}

.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 (255pr. 255pr. 0.3)

Background-color:currentColor

Bottom:0

Left:300px

Border-radius:5px

}

.glass:: before {

Width:50px

Height:40px

Border:10pxsolid

Top:20px

Right:-20px

Border-radius:040%40%0

Clip-path:inset (00072%)

}

Draw the beer and foam in the cup:

.beer {

Position:absolute

Width:60px

Height:80px

Background-color:rgba (255, 206, 84, 0.8)

Bottom:15px

Left:5px

Border-radius:005px5px

Border-top:solidrgba (255, 206, 84, 0.8)

}

.beer:: before {

Width:inherit

Height:15px

Background-color:#eee

Top:-15px

Border-radius:5px5px00

}

Next, animate.

Add animation when the handle of the wine glass is pressed down:

.keg.handle {

Transform-origin:center50px

Animation:handle5sinfinite

}

@ keyframeshandle {

10% 50% 60% {

Transform:rotate (0deg)

}

20% 50% {

Transform:rotate (- 90deg)

}

}

Add animations of beer being refilled:

.beer {

Animation:fillup5sinfinite

}

@ keyframesfillup {

0% 10% 20% {

Height:0px

Border-width:0px

}

40% {

Height:40px

}

80% pas 100% {

Height:80px

Border-width:5px

}

}

Increase the animation effect of beer foam:

.beer:: before {

Animation:

Wave0.5sinfinitealternate

Fillup-foam5slinearinfinite

}

@ keyframesfillup-foam {

0% 10% 20% {

Top:0

Height:0

}

60% 100% {

Top:-15px

Height:15px

}

}

@ keyframeswave {

From {

Transform:skewY (- 3deg)

}

To {

Transform:skewY (3deg)

}

}

Increase the effect of beer outflow from the outlet:

.keg.pipe:: after {

Width:10px

Background-color:rgba (255, 206, 84, 0.5)

Animation:flow5sinfinite

}

@ keyframesflow {

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 sliding effect of the wine glass:

.glass {

Animation:slide5seaseinfinite

}

@ keyframesslide {

0% {

Left:0

Filter:opacity (0)

}

20% 80% {

Left:300px

Filter:opacity (1)

}

100% {

Left:600px

Filter:opacity (0)

}

}

Thank you for reading this article carefully. I hope the article "how to use pure CSS to achieve the special effects of draft beer" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.