So verwenden Sie CSS Secret

php中世界最好的语言

Freigeben： 2018-03-19 10:27:30

Original

1874 Leute haben es durchsucht

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

Nach dem Login kopieren

    /*基于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: &#39;&#39;;
        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;
    }

Nach dem Login kopieren

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

Nach dem Login kopieren

Kreisdiagramm (basierend auf SVG-Implementierung)

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

Nach dem Login kopieren

    /*基于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;
    }

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!