Comment utiliser du CSS pur pour obtenir l'effet d'une carte de couleurs-tutoriel CSS-php.cn

Comment utiliser du CSS pur pour obtenir l'effet d'une carte de couleurs

不言

Libérer： 2018-07-10 17:12:36

original

2696 Les gens l'ont consulté

Cet article présente principalement comment utiliser du CSS pur pour obtenir l'effet d'une carte de couleur. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

. Comment utiliser du CSS pur pour obtenir leffet dune carte de couleurs

Téléchargement du code source

Veuillez télécharger tout le code source de la série pratique quotidienne du front-end depuis github :

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

Interprétation du code

Définir dom, le conteneur contient 8 éléments :

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

Copier après la connexion

Affichage centré :

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

Copier après la connexion

Redéfinir le modèle de la boîte :

.cards,
.cards > * {
    box-sizing: border-box;
}

Copier après la connexion

Définir les dimensions du conteneur :

.cards {
    width: 20em;
    height: 20em;
}

Copier après la connexion

Dessiner la carte de couleur :

.cards span {
    position: absolute;
    width: 10em;
    height: 3em;
    background-color: lightgreen;
    top: calc(50% - 3em / 2);
    border: 0.2em solid dimgray;
    border-radius: 0.3em 0.8em 0.8em 0.3em;
}

Copier après la connexion

Dessiner l'étiquette de la carte de couleur avec un pseudo-élément :

.cards span::before {
    content: '';
    position: absolute;
    width: 35%;
    height: 100%;
    background-color: white;
    right: 0;
    border-radius: 0 0.6em 0.6em 0;
    border-left: 0.2em solid silver;
}

Copier après la connexion

Utilisez des pseudo-éléments pour dessiner le texte sur l'étiquette de la carte de couleur :

.cards span::after {
    content: '';
    position: absolute;
    width: 0.4em;
    height: 2em;
    background-color: silver;
    left: 6.5em;
    top: 0.1em;
    box-shadow: 0.7em 0 0 -0.1em silver;
}

Copier après la connexion

Définissez une variable pour la carte de couleur :

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

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

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

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

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

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

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

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

Copier après la connexion

Utilisez Mode couleur HSL pour la couleur Colorer la carte :

.cards span {
    background-color: hsl(calc(360 / 8 * var(--n)), 80%, 70%);
}

Copier après la connexion

Définir l'effet d'animation :

.cards span {
    transform-origin: right;
    animation: rotating 3s linear infinite;
}

@keyframes rotating {
    0%, 35% {
        transform: rotate(0deg);
    }

    90%, 100% {
        transform: rotate(360deg);
    }
}

Copier après la connexion

Enfin, définir le délai d'animation pour laisser la carte tourner en séquence :

.cards span {
    animation-delay: calc((var(--n) - 8) * 0.15s);
}

Copier après la connexion

Vous avez terminé !

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser CSS pour obtenir un effet de glissement de texte de bouton

Introduction à la création de styles d'arrière-plan à rayures pour les pages Web en utilisant CSS

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!