So verwenden Sie CSS Secret

Dieses Mal zeige ich Ihnen, wie Sie Css Secret verwenden und welche Vorsichtsmaßnahmen bei der Verwendung von Css Secret gelten. Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

Css Secret vollständiger Satz von Fällen

---

Github-Adresse

Falladresse

Letztes Jahr habe ich ein CSS-Buch mit dem Titel „CSS Secrets“ gekauft, das enthüllte Es enthält 47 wenig bekannte CSS-Techniken, darunter Hintergründe und Rahmen, Formen, visuelle Effekte, Typografie, Benutzererfahrung, Struktur und Layout, Übergänge und Animationen usw. Als ich es letztes Jahr kaufte, beschloss ich, alle darin enthaltenen Demo-Hüllen als ersten Punkt auf meiner Lernliste für 2018 durchzuspielen. In diesem Prozess können Sie auch einige praktische CSS-Kenntnisse erlernen, die auch für das CSS-Layout am Arbeitsplatz sehr hilfreich sind.

Im Folgenden sind mehrere interessante Möglichkeiten zur Implementierung von CSS-Szenarien aufgeführt:

Kreisdiagramm (basierend auf der Transformationsimplementierung)

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

Kreisdiagramm (basierend auf SVG-Implementierung)

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

Zeilenumbruch einfügen

    <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 Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Gulp-Befehl zum Generieren von Sprites

Der Text der Dropdown-Liste „Safari Browser Select“ ist zu lang und schließt die Lösung nicht ein

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS Secret. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!