Comment utiliser le secret CSS

Cette fois je vais vous montrer comment utiliser Css Secret et quelles sont les précautions lors de l'utilisation de Css Secret Voici un cas pratique, jetons un oeil.

Ensemble complet de cas CSS Secret

---

adresse github

adresse du cas

L'année dernière, j'ai acheté un livre CSS intitulé CSS Secrets, qui a révélé Il contient 47 techniques CSS peu connues, dont les arrière-plans et bordures, les formes, les effets visuels, la typographie, l'expérience utilisateur, la structure et la mise en page, les transitions et animations, etc. Lorsque je l'ai acheté l'année dernière, j'ai décidé de jouer à tous les cas de démonstration comme premier élément de ma liste d'apprentissage 2018. Au cours de ce processus, vous pouvez également acquérir des compétences CSS pratiques, qui sont également très utiles pour la mise en page CSS au travail.

Voici plusieurs façons intéressantes d'implémenter des scénarios CSS :

Graphique circulaire (basé sur l'implémentation de la transformation)

<p class="picture1">20</p

    /*基于transform的解决方案*/
    .picture1 {
        position: relative;
        width: 100px;
        line-height: 100px;
        text-align: center;
        color: transparent;
        background: yellowgreen;
        background-image: linear-gradient(to right, transparent 50%, #655 0);
        border-radius: 50%;
        /*animation-delay: -20s;*/
    }
    @keyframes spin {
        to { transform: rotate(.5turn); }
    }
    @keyframes bg {
        50% { background: #655; }
    }    .picture1::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 50%;
        height: 100%;
        border-radius: 0 100% 100% 0 / 50%;
        background-color: inherit;
        transform-origin: left;
        animation: spin 50s linear infinite,
                   bg 100s step-end infinite;
        animation-play-state: paused;
        animation-delay: inherit;
    }

    // 基于transform的解决方案
    let picture1 = document.querySelector('.picture1');
    let rate1 = parseFloat(picture1.textContent);
    picture1.style.animationDelay = `-${rate1}s`;

Graphique circulaire (basé sur l'implémentation SVG)

    <svg viewBox="0 0 32 32">
        <circle id="circle2" r="16" cx="16" cy="16"></circle>
    </svg>

    /*基于svg的解决方案*/
    svg {
        width: 100px;
        height: 100px;
        transform: rotate(-90deg);
        background: yellowgreen;
        border-radius: 50%;
    }
    circle{
        fill: yellowgreen;
        stroke: #655;
        stroke-width: 32;
    }
    #circle2 {
        stroke-dasharray: 38 100;
    }

Insérer un saut de ligne

    <dl>
        <dt>Name:</dt>
        <dd>wushaobin</dd>
        <dt>Email:</dt>
        <dd>739288994@qq.com</dd>
        <dd>12345@qq.com</dd>
        <dd>54321@qq.com</dd>
        <dt>Location:</dt>
        <dd>shenzhen</dd>
    </dl>

    dt,dd {
        display: inline;
    }
    dd{
        margin: 0;
        font-weight: bold;
    }
    dd+dt::before {
        content: '\A';
        white-space: pre;
    }
    dd+dd::before {
        content: ', ';
        font-weight: normal;
    }

I Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Commande Gulp pour générer des sprites

Le texte de la liste déroulante de sélection du navigateur Safari est trop long et n'enveloppe pas la solution

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!