How to use CSS Secret

This time I will show you how to use Css Secret, what are the precautions when using Css Secret, the following is a practical case, let’s take a look.

Css Secret full set of cases

---

github address

case address

Last year I bought a css book on CSS Revealed, which revealed It contains 47 little-known CSS techniques, including background and borders, shapes, visual effects, typography, user experience, structure and layout, transitions and animations, etc. When I bought it last year, I decided to play through all the demo cases in it as the first item on my 2018 learning list. In this process, you can also learn some practical CSS skills, which are also very helpful for CSS layout at work.

The following are several interesting ways to implement CSS scenarios:

Pie chart (based on transform implementation)

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

pie Figure (based on svg implementation)

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

Insert newline

    <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 believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to php Chinese Other related articles online!

Recommended reading:

Gulp command to generate sprites

Safari browser select drop-down list text is too long and does not wrap Solution

The above is the detailed content of How to use CSS Secret. For more information, please follow other related articles on the PHP Chinese website!