집 > 기사 > 웹 프론트엔드 > CSS 비밀을 사용하는 방법

CSS 비밀을 사용하는 방법

php中世界最好的语言원래의: 2018-03-19 10:27:301827검색

이번에는 CSS Secret 사용법과 CSS Secret 사용 시 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

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

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>

rrre 에

나 이 기사의 사례를 읽은 후 방법을 마스터했다고 믿으십시오. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트에 있는 다른 관련 기사를 주의 깊게 살펴보시기 바랍니다.