Comment utiliser du CSS pur pour implémenter l'icône d'album du système Apple (code)

Le contenu de cet article explique comment utiliser CSS pour implémenter l'icône d'album (code) du système Apple. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. pour vous. .

Aperçu de l'effet

Téléchargement du code source

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

Interprétation du code

Définir dom, le conteneur contient 8 éléments, chaque élément représente un bloc de couleur rectangulaire :

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

Affichage centré :

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

Définissez la taille du conteneur :

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

Dessinez le contour du rectangle (la bordure est une ligne auxiliaire et sera éventuellement supprimée), et placez-la en haut au milieu du conteneur :

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

Définissez la variable d'indice --n pour le rectangle :

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

Laissez 8 rectangles tourner à des angles fixes en séquence pour former un cercle :

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

Définissez la variable Couleur du rectangle --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);
}

Colorez 8 rectangles et supprimez les bordures qui servent de lignes auxiliaires :

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

Définissez le mode de mélange des couleurs pour que les chevauchements les couleurs peuvent être superposées Ensemble :

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

Ajoutez l'effet de survol de la souris et exécutez l'animation de l'extension du bloc de couleur rectangulaire lors du survol :

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

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

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

Notez que pendant le processus d'animation, le premier rectangle et Il n'y a pas de rotation, car il passe de 0 degré à 0 degré. Pour le faire pivoter, vous devez définir son angle de fin à 360 degrés. Ceci est réalisé en modifiant sa variable d'indice :

<.>

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

Vous avez terminé !

Recommandations associées :

Comment utiliser du CSS pur pour obtenir l'effet de texte consistant à déchirer du papier d'aluminium (avec code)

Comment utiliser le CSS pour surveiller état de la connexion réseau La page

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!