如何使用純CSS實現一台咖啡機的效果

這篇文章主要介紹了關於如何使用純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);    }}

大功告成！

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！