CSS3를 사용하여 캐릭터를 아름답게 만드는 방법-CSS 튜토리얼-php.cn

CSS3를 사용하여 캐릭터를 아름답게 만드는 방법

青灯夜游

풀어 주다： 2018-09-07 16:24:38

원래의

1831명이 탐색했습니다.

CSS는 기술일 뿐만 아니라 예술이기도 합니다. 잘 사용하면 다양한 마법 효과를 만들 수 있습니다. 최신 브라우저 기술의 발전으로 CSS3의 혁신은 프로그래머에게 더 많은 공간과 공간을 제공합니다. 자신의 변덕을 표현할 가능성. 그럼 CSS로 캐릭터의 절반을 아름답게 만드는 방법에 대해 알아보겠습니다. 사실 문자를 반으로 나누는 것입니다. 반은 A 스타일, 반은 B 스타일입니다. 물론 한자든 서양자든 한 글자가 분리될 수 없다는 것은 모두가 알고 있는 사실이다. 또한 매우 일반적입니다. 하지만 캐릭터의 절반을 아름답게 만드는 방법은 무엇입니까? 물론 방법은 있습니다. 여기에 필요한 것은 예술입니다.

먼저 필요한 렌더링을 살펴보세요.

CSS3를 사용하여 캐릭터를 아름답게 만드는 방법

왼쪽은 단일 색상이고 오른쪽은 단일 색상입니다. 그림을 사용하면 물론 매우 쉽지만 그림에는 문자 스타일을 동적으로 생성할 수 없는 등의 제한 사항이 있습니다. 순수 CSS를 사용하여 이 효과를 얻는 방법을 살펴보겠습니다.

CSS로 문자 절반을 아름답게 만드는 기본 아이디어

아이디어는 매우 간단합니다. 단어를 두 번 쓰고 각각 절반을 표시하면 됩니다. 아이디어는 매우 명확하고 간단하지만 이를 구현하는 방법은 무엇입니까? 물론 실제로 한 단어를 두 번 쓸 수는 없습니다. 이는 너무 어리석은 일이며 사용자가 이 텍스트를 복사하여 붙여넣으면 동일한 텍스트가 두 개 붙여넣어지게 됩니다. 여기서는 CSS 의사 요소(before 및 :after)를 사용해야 합니다. 이 "의사 요소"에 원래 존재하지 않음을 나타내는 "의사"라는 단어를 기억하세요. 우리의 방법은 의사 요소에 동일한 문자를 배치하여 절반만 표시하고 나머지 절반은 원래 문자를 표시하여 최종적으로 하나의 단어로 결합하는 것입니다.

CSS code

.halfStyle {
    position:relative;
    display:inline-block;
    font-size:80px; /*  任何宽度都可以 */
    color: black; /* 任何颜色，或透明 */
    overflow:hidden;
    white-space: pre; /* 处理空格 */
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    left:0;
    width: 50%;
    content: attr(data-content); /* 伪元素的动态获取内容 */
    overflow:hidden;
    color: #f00;
}

로그인 후 복사

HTML code

<p>单个字符</p>
<span class="halfStyle lazy " data-content="风">风</span>
<span class="halfStyle lazy " data-content="流">流</span>
<span class="halfStyle lazy " data-content="倜">倜</span>
<span class="halfStyle lazy " data-content="傥">傥</span>

<hr/>
<p>用脚本自动美化：</p>

<span class="textToHalfStyle lazy ">恋爱容易婚姻不易，且行且珍惜。</span>

로그인 후 복사

당신이 해야 할 일은 절반의 미화가 필요한 각 문자에 .halfStyleCSS 클래스를 적용하는 것뿐입니다. 위의 코드 예제에서 각 범위에는 문자가 포함되어 있으며 data-content="wind"와 같이 그 위에 데이터 속성을 배치한 다음 의사 요소에서 attr(data-content) 메서드를 사용합니다. 해당 .halfStyle:before는 내용을 수동으로 하드코딩할 필요 없이 동적이 됩니다.

여러 문자를 아름답게 해야 하는 상황의 경우 jQuery 코드 조각을 만들어 .textToHalfStyleCSS 클래스가 있는 모든 문자에 이 효과를 자동으로 추가할 수 있습니다.

jQuery(function($) {
    var text, chars, $el, i, output;

    // 遍历所有字符
    $(&#39;.textToHalfStyle&#39;).each(function(idx, el) {
        $el = $(el);
        text = $el.text();
        chars = text.split(&#39;&#39;);

        // Set the screen-reader text
        $el.html(&#39;
        <span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">&#39; 
        + text + &#39;</span>&#39;
        );

        // Reset output for appending
        output = &#39;&#39;;

        // Iterate over all chars in the text
        for (i = 0; i < chars.length; i++) {
            // Create a styled element for each character and append to container
            output += &#39;<span aria-hidden="true" data-content="&#39; + chars[i] + &#39;">&#39; + chars[i] + &#39;</span>&#39;;
        }

        // Write to DOM only once
        $el.append(output);
    });
});

로그인 후 복사

이런 방식으로 텍스트 단락이든 전체 텍스트를 한 번에 모두 할 수 있습니다. 하나씩 수동으로 설정할 필요도 없고, 그림을 하나씩 그릴 필요도 없습니다!

고급 방법: 문자의 왼쪽과 오른쪽 절반은 의사 요소를 사용하여 생성됩니다.

위 방법에서 텍스트의 왼쪽 절반은 :before 의사 요소를 사용하여 생성되고 오른쪽 절반은 원본 텍스트를 사용합니다. 그러나 실제로는 의사 요소를 사용하여 왼쪽과 오른쪽을 모두 생성할 수 있습니다. 오른쪽 절반은 :after로 구현됩니다.

CSS 코드

.halfStyle {
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before { /* creates the left part */
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the right part */
    display:block;
    direction: rtl; /* very important, will make the width to start from right */
    position:absolute;
    z-index:2;
    top:0;
    left:50%;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

로그인 후 복사

우리의 구현 방법은 매우 유연할 수 있습니다. 이제 표면에 세 개의 겹치는 단어가 있습니다. 이런 식으로 세 가지 색상의 단어를 얻을 수 있습니다. . 위의 예는 모두 왼쪽과 오른쪽 색상 분리를 사용합니다. 실제로 위쪽과 아래쪽 색 분리 또는 위쪽, 중간, 아래쪽 색 분리를 사용하도록 만들 수도 있습니다.

CSS3를 사용하여 캐릭터를 아름답게 만드는 방법