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

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

不言

Libérer： 2018-08-30 10:30:53

original

2540 Les gens l'ont consulté

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

Comment utiliser du CSS pur pour implémenter licône dalbum du système Apple (code)

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>

Copier après la connexion

Affichage centré :

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

Copier après la connexion

Définissez la taille du conteneur :

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!