How to use CSS Secret

php中世界最好的语言

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

Original

1873 people have browsed it

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

Copy after login

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

Copy after login

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

Copy after login

pie Figure (based on svg implementation)

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

Copy after login

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

Copy after login

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>

Copy after login

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

Copy after login

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!