So erzielen Sie mit reinem CSS den Effekt einer Kaffeemaschine-CSS-Tutorial-php.cn

So erzielen Sie mit reinem CSS den Effekt einer Kaffeemaschine

不言

Freigeben： 2018-07-10 17:24:07

Original

2164 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich vor, wie man mit reinem CSS die Wirkung einer Kaffeemaschine erzielt. Jetzt kann ich ihn mit Ihnen teilen.

So erzielen Sie mit reinem CSS den Effekt einer Kaffeemaschine

Quellcode-Download

Bitte laden Sie den gesamten Quellcode der täglichen Front-End-Praxisreihe von Github herunter:

https://github.com/comehope/front- End-Daily-Herausforderungen

Code-Interpretation

Dom definieren, der Behälter enthält den Körper, den Wasserauslass, die Kaffeetasse, den Knopf und den Kaffee:

<p>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</p>

Nach dem Login kopieren

Zentrierte Anzeige:

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

Nach dem Login kopieren

Definieren Sie die Behältergröße:

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

Nach dem Login kopieren

Zeichnen Sie den äußeren Rahmen der Maschine:

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

Nach dem Login kopieren

Zeichnen Sie den mittleren Teil der Maschine mit Pseudoelementen:

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

Nach dem Login kopieren

Zeichne den Wasserauslass:

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

Nach dem Login kopieren

Zeichne den Körper der Kaffeetasse:

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

Nach dem Login kopieren

Zeichne den Griff der Kaffeetasse mit Pseudoelementen:

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

Nach dem Login kopieren

Zeichne den Knopf:

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

Nach dem Login kopieren

Ziehen Sie den Kaffee auf:

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

Nach dem Login kopieren

Als nächstes polieren Sie ihn.

Fügen Sie der Kaffeemaschine Licht und Schatten hinzu:

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

Nach dem Login kopieren

Definieren Sie die erste Hälfte der Kaffeeflussanimation, also den Kaffeefluss vom Auslass zur Tasse:

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

Nach dem Login kopieren

Definieren Sie die zweite Hälfte der Kaffeefluss-Animation, das heißt, der Kaffeeauslauf hört auf zu fließen und der restliche Kaffee fließt in die Tasse:

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

Nach dem Login kopieren

Sie sind fertig!

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie reines CSS, um den Effekt einer Farbkarte zu erzielen

So verwenden Sie CSS, um eine zu implementieren Einzelelement-Gitterlader-Effekt

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit reinem CSS den Effekt einer Kaffeemaschine. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!