用咖啡机做咖啡的步骤

发布网友

我来回答

共3个回答

懂视网

这篇文章主要介绍了关于如何使用纯CSS实现一台咖啡机的效果，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

源代码下载

每日前端实战系列的全部源代码请从 github 下载：

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

代码解读

定义 dom，容器中包含机体、出水口、咖啡杯、按钮和咖啡：

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

居中显示：

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

定义容器尺寸：

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

画出机体的外框：

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

用伪元素画出机体的中间部分：

.body::after {
 content: '';
 position: absolute;
 width: 8em;
 height: 8em;
 background-color: darkslategray;
 top: 2em;
 border-right: 0.6em solid black;
}

画出出水口：

.spout {
 position: absolute;
 width: 3em;
 height: 1em;
 background-color: white;
 top: 3.5em;
 border-radius: 0.5em;
 border-right: 0.5em solid silver;
}

画出咖啡杯的杯体：

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

用伪元素画出咖啡杯的把手：

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

画出按钮：

.button {
 position: absolute;
 width: 1.2em;
 height: 1.2em;
 background-color: tomato;
 border-radius: 50%;
 bottom: 2em;
 right: 4.5em;
}

画出咖啡：

.coffee::before,
.coffee::after {
 content: '';
 position: absolute;
 width: 0.7em;
 height: 5em;
 background-color: chocolate;
 top: 4.5em;
 left: calc((15em - 0.7em) / 2);
}

接下来润色一下。

为咖啡机增加光影：

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

定义咖啡流动的前半段动画，即咖啡从出水口流到杯中：

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

定义咖啡流动的后半段动画，即出水口停止流出咖啡，剩余咖啡流到杯中：

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

大功告成！

热心网友

用咖啡机做咖啡的步骤

料  

半自动意式咖啡机机    惠家咖啡机    

咖啡豆/咖啡粉    深焙咖啡豆/粉    

牛奶    冷藏全脂鲜牛奶    

咖啡杯    300ml左右大口径杯    

拉花缸    600ml左右拉花缸    

咖啡机插好电源，注意是需要16A的大功率插口哈、惠家这款咖啡机几个按键还是很清晰明了的，一杯量两杯量或者手动控制咖啡液量都是可以的

请点击输入图片描述

看中惠家其中有一点就是它的蒸汽棒，细长款，可以摆各种角度，怎么顺手怎么来、不用担心够不到牛奶液面等问题

请点击输入图片描述

水箱里的水加至一多半，一定用纯净水哈，不然会有水碱，也会影响咖啡萃取的口感

请点击输入图片描述

按住电源键2s左右开启咖啡机，这时候电源按键上方会开始闪烁，咖啡机正在预热

请点击输入图片描述

等到电源键是常亮的红色、后面三个按键变常亮*时，咖啡机已经预热完毕

请点击输入图片描述

咖啡机预热好后，杯子放在最上面是可以暖杯的哦，设计的贴心实用~

请点击输入图片描述

咖啡豆的选择，要选中深焙或者深焙的咖啡豆哦，豆子颜色会偏深，有很浓的咖啡香气

请点击输入图片描述

如果买回来的是咖啡豆，制作咖啡前需要磨粉，家里没有磨豆机的话买咖啡豆的时候可以让卖家代磨，告诉卖家你是做什么种类咖啡的就好，这里强调下，磨粉的粗细对咖啡萃取有关键影响，不要用做手冲的磨豆机磨意式咖啡的豆子，会很粗导致萃取不充分，

请点击输入图片描述

粉碗中加适量咖啡粉，这里用的是双杯粉碗，加入约23g咖啡粉，用手将表面抹平后清除周围咖啡粉残渣

用惠家自带的咖啡粉锤压实咖啡，略微用力压实，力度的大小会影响咖啡萃取，大家可以自己多做多磨合，找到合适的力度

现在回到咖啡机上，按下自动键先让热水冲洗咖啡冲煮头，5s左右即可，然后再按自动键停止流水

请点击输入图片描述

蒸汽棒旋钮拧到最大后持续出蒸汽5s清洗蒸汽喷孔，然后再关上，这里注意用块干净的抹布包住蒸汽喷孔，别被蒸汽烫伤

请点击输入图片描述

前两步工作最好后，粉碗由左向右拧至中间位置，固定在冲煮头上

请点击输入图片描述

按自动键、开始萃取咖啡、注意观察咖啡液流下的速度和粗细，应该是类似图中这种的细流，如果咖啡萃取液流的太快而且过粗、说明咖啡粉磨的太粗或者粉碗没有压实、还需调整，萃取大概21s就好了，也可直接按咖啡机上的2杯按钮制作，咖啡机会自动萃取并停止

请点击输入图片描述

惠家这款咖啡机有压力表显示压力，观察起来十分方便，指针在中间部分偏右表示压力合适，不到中间部分说明压力过小，超过中间部分到红色区域表示压力过大，都需要调整咖啡豆磨粉粗细、咖啡粉量多少或者压粉的力度

请点击输入图片描述

萃取好的咖啡油脂很明显，是深棕色的咖啡萃取液，家用咖啡机能做到这种力度的萃取已经相当棒啦~

请点击输入图片描述

拉花缸内加入240-250ml左右冷藏鲜牛奶、纯牛奶也行，但必须是冷藏的！常温打出的奶泡会很粗，奶量至拉花缸的凹槽下面就好

请点击输入图片描述

蒸汽棒的蒸汽孔深入奶下1cm左右，缸体倾斜、这样会更有利于打出漩涡，旋转旋钮至最大蒸汽量，慢慢向下挪动拉花缸，到能听见“呲呲呲”的声音停止挪动，这时候正在打入空气，不要再向下动了，否则蒸汽棒会打飞牛奶哦，到体积增加大概1.3倍时候再慢慢向上挪动拉花缸，开始打绵阶段，手摸拉花缸至烫手温度（大概65度）的时候就可以关掉蒸汽旋钮了

请点击输入图片描述

开始准备融合拉花、杯子把冲着自己，这样拉出来的图案是正对着自己的~

请点击输入图片描述

晃动拉花缸混合均匀蒸汽奶泡，可以再振几下去掉其中的粗泡，然后拉花就可以啦，具体操作手法可以搜些视频看，多多练习操作一定没问题的

请点击输入图片描述

咖啡制作完毕后别忘了随时清洗咖啡机哦~好好使用清洗保养，惠家咖啡机足够家用制作意式咖啡啦

请点击输入图片描述

小贴士

1、关于咖啡豆磨粉粗细，这点真的很重要哦，粗细一定慢慢调节，合适的粗细才会萃取出一杯完美的浓缩咖啡；
2、关于打蒸汽奶泡的方法，多看多听多练习，惠家咖啡机打蒸汽奶泡肯定没问题的、再强调下步骤：
打蒸汽奶泡开始是注入空气阶段，此时蒸汽喷嘴的顶端保持在稍微触即到牛奶表面的程度最为合适，会听到小的“呲”的声音，体积增加1.3-1.5倍时进入下一个阶段就是旋转打绵，这时将蒸汽喷嘴稍微向下埋一点，找到合适的位置顺利实现旋转，使牛奶打绵打细腻，打发奶泡和拉花手法网上都有视频可参考，大家可以多搜多看多练习的
3、关于咖啡杯和拉花缸的选择、我自己是这样认为，刚开始练习还是找大口径的杯子好练习，300ml左右，拉花缸相应的就选择500-600ml的容量的就好、比较好观察好操作

热心网友

浓缩咖啡
材料：
Espresso专用豆8g
做法：
1、检查磨豆机刻度，调至细磨。
2、用磨豆机将咖啡磨成粉后，装入填压器。
3、以填压器填压，使咖啡粉分布均匀平整，粹取的咖啡才会均匀。
4、安装单口滤器把手，冲煮约23、24秒左右即可。