So implementieren Sie das Albumsymbol des Apple-Systems mit reinem CSS (Code)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS zur Implementierung des Albumsymbols (Code) des Apple-Systems. Ich hoffe, dass er hilfreich ist zu dir. .

Effektvorschau

Quellcode-Download

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

Code-Interpretation

Dom definieren, der Container enthält 8 Elemente, jedes Element stellt einen rechteckigen Farbblock dar:

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Zentrierte Anzeige:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ccc;
}

Definieren Sie die Containergröße:

.icon {
    width: 10em;
    height: 10em;
    font-size: 30px;
    background-color: #eee;
    border-radius: 20%;
}

Zeichnen Sie den Umriss des Rechtecks ​​(der Rand ist eine Hilfslinie, die irgendwann gelöscht wird) und platzieren Sie es in der oberen Mitte des Containers:

.icon {
    position: relative;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding: 1em;
}

.icon span {
    position: absolute;
    width: 22.5%;
    height: 37.5%;
    border: 1px dashed black;
    border-radius: 50% / 30%;
}

Setzen Sie den Index für die Rechteckvariable --n:

.icon span:nth-child(1) {
    --n: 1;
}

.icon span:nth-child(2) {
    --n: 2;
}

.icon span:nth-child(3) {
    --n: 3;
}

.icon span:nth-child(4) {
    --n: 4;
}

.icon span:nth-child(5) {
    --n: 5;
}

.icon span:nth-child(6) {
    --n: 6;
}

.icon span:nth-child(7) {
    --n: 7;
}

.icon span:nth-child(8) {
    --n: 8;
}

Drehen Sie 8 Rechtecke nacheinander in einem festen Winkel, um einen Kreis zu bilden:

.icon span {
    transform-origin: center 105%;
    transform: rotate(calc((var(--n) - 1) * 45deg));
}

Legen Sie die Farbvariable für das Rechteck fest --c :

.icon span:nth-child(1) {
    --c: rgba(243, 156, 18, 0.7);
}

.icon span:nth-child(2) {
    --c: rgba(241, 196, 15, 0.7);
}

.icon span:nth-child(3) {
    --c: rgba(46, 204, 113, 0.7);
}

.icon span:nth-child(4) {
    --c: rgba(27, 188, 155, 0.7);
}

.icon span:nth-child(5) {
    --c: rgba(65, 131, 215, 0.7);
}

.icon span:nth-child(6) {
    --c: rgba(102, 51, 153, 0.7);
}

.icon span:nth-child(7) {
    --c: rgba(155, 89, 182, 0.7);
}

.icon span:nth-child(8) {
    --c: rgba(242, 38, 19, 0.7);
}

Färben Sie 8 Rechtecke ein und löschen Sie die Ränder, die als Hilfslinien dienen:

.icon span {
    /* border: 1px dashed black; */
    background-color: var(--c);
}

Stellen Sie den Farbmischmodus so ein, dass überlappende Farben überlagert werden können:

.icon span {
    mix-blend-mode: multiply;
}

Fügen Sie a hinzu Mouseover-Effekt, Führen Sie die Animation zum Erweitern des rechteckigen Farbblocks aus, wenn Sie mit der Maus darüber fahren:

.icon:hover span {
    animation: rotating 2s ease-in-out forwards;
}

@keyframes rotating {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(calc((var(--n) - 1) * 45deg));
    }
}

Beachten Sie, dass sich das erste Rechteck während des Animationsprozesses nicht dreht, da es von 0 Grad auf 0 Grad geht Drehen, müssen Sie seinen Endwinkel auf 360 Grad einstellen, indem Sie seine tiefgestellte Variable ändern:

.icon span:nth-child(1) {
    --n: 9;
}

Sie sind fertig!

Verwandte Empfehlungen:

So verwenden Sie reines CSS, um den Texteffekt des Zerreißens von Alufolie zu erzielen (mit Code)

So verwenden Sie CSS zur Überwachung Netzwerkverbindungsstatus Die Seite

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Albumsymbol des Apple-Systems mit reinem CSS (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!