这篇文章主要介绍了关于如何使用纯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); } }
大功告成!
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
Atas ialah kandungan terperinci 如何使用纯CSS实现一台咖啡机的效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!