Css Secret のケースのフルセット

github address

case address

昨年、私は CSS Secrets というタイトルの CSS 本を購入しました。その本では、主に背景、境界線、形状を含む 47 のあまり知られていない CSS テクニックが説明されていました。視覚効果、タイポグラフィ、ユーザーエクスペリエンス、構造とレイアウト、トランジションとアニメーションなど。昨年購入したとき、2018 年の学習リストの最初の項目として、その中のすべてのデモケースを試してみることにしました。このプロセスでは、実際の CSS スキルも学ぶことができ、仕事での CSS レイアウトにも非常に役立ちます。

以下は、CSS シーンを実装するためのいくつかの興味深い方法です:

円グラフ (変換実装に基づく)

<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: &#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;
    }

ログイン後にコピー

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

ログイン後にコピー

円グラフ (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;
    }

ログイン後にコピー

改行の挿入

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

ログイン後にコピー

信じますこの記事の事例を読んだ後は、その方法を習得したことになります。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

スプライトを生成するためのGulpコマンド

Safariブラウザの選択ドロップダウンリストのテキストが長すぎて改行されません

以上がCSSシークレットの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。