멋진 텍스트 효과를 얻기 위해 5가지 순수 CSS를 구성하고 공유하세요.-프런트엔드 Q&A-php.cn

이 기사에서는 5가지 매우 멋진 텍스트 효과를 제공합니다. 이 효과는 모두 CSS를 사용하여 구현되었습니다.

멋진 텍스트 효과를 얻기 위해 5가지 순수 CSS를 구성하고 공유하세요.

CSS는 매우 특별한 언어입니다. CSS는 웹 페이지의 구조와 스타일을 제어하는 데만 사용할 수 있다고 생각하지만, 풍부한 상상력이 있는 한 무한한 가능성을 만들 수 있습니다.

1. 그라데이션 텍스트 효과

이 효과는 주로 그라데이션 텍스트 효과를 얻기 위해 색상이 포함된 background-clip:text를 사용합니다. 상자 안의 텍스트를 사용하십시오. 텍스트는 자르기 영역으로 바깥쪽으로 잘리고, 텍스트 외부 영역도 잘립니다.

텍스트 컨테이너에 그라데이션 배경을 설정합니다

 background: linear-gradient(90deg, black 0%, white 50%, black 100%);

로그인 후 복사

webkit-backup-clip 속성을 설정하고 텍스트를 자르기 영역으로 사용하여 바깥쪽으로 자릅니다.

-webkit-background-clip: text;
        background-clip: text;

로그인 후 복사

-webkit-animation 속성을 통해 애니메이션을 설정하여 위의 효과를 얻습니다

-webkit-animation: shining 3s linear infinite;
        animation: shining 3s linear infinite;

로그인 후 복사

@-webkit-keyframes shining {
  from {
    background-position: -500%;
  }
  to {
    background-position: 500%;
  }
}
@keyframes shining {
  from {
    background-position: -500%;
  }
  to {
    background-position: 500%;
  }
}

로그인 후 복사

스타일 참조

<html>
    <link rel="stylesheet" href="./css/neno-text-style.css">
    <body>
        <p class="neon">前端实验室</p>
    </body>
</html>

로그인 후 복사

2. 무지개 텍스트 효과(marquee)

멋진 텍스트 효과를 얻기 위해 5가지 순수 CSS를 구성하고 공유하세요.

.text {
    letter-spacing: 0.2rem;
    font-size: 1.5rem;
    background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
}

로그인 후 복사

이 효과는 background-clip:text 및 선형 그라데이션 속성을 사용하여 얻을 수도 있습니다. 지역 색상 값을 설정하여 달성됩니다.

동적 무지개 텍스트는 -webkit-animation 속성을 설정해야 합니다.

-webkit-animation: maskedAnimation 4s infinite linear;
@keyframes maskedAnimation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}

로그인 후 복사

CSS 스타일

.rainbow {
    letter-spacing: 0.2rem;
    font-size: 1.2rem;
    text-transform: uppercase;
}
.rainbow span {
    animation: rainbow 50s alternate infinite forwards;
}
@keyframes rainbow {
    0% {
        color: #efc68f;
    }
    ...
    100% {
        color: #8fefed;
    }
}

로그인 후 복사

<html>
    <head>
        <link rel="stylesheet" href="./css/rainbow-color-text-style.css">
    </head>
    <body>
        <div class="text">【前端实验室】分享前端最新、最实用前端技术</div>
    </body>
</html>

로그인 후 복사

3 빛나는 텍스트 효과

이 효과는 주로 텍스트 그림자를 사용하여 달성됩니다. 기인하다. text-shadow 속성은 텍스트에 하나 이상의 그림자를 추가합니다. 이 속성은 쉼표로 구분된 음영 목록으로, 각 음영은 2~3개의 길이 값과 선택적 색상 값으로 지정됩니다.

.neon {
    color: #cce7f8;
    font-size: 2.5rem;
    -webkit-animation: shining 0.5s alternate infinite;
    animation: shining 0.5s alternate infinite;
}

로그인 후 복사

@-webkit-keyframes shining {
    from {
        text-shadow: 0 0 10px lightblue, 0 0 20px lightblue, 0 0 30px lightblue, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue;
    }
    to {
        text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue;
    }
}

로그인 후 복사

<html>
    <head>
        <link rel="stylesheet" href="./css/neno-text-style.css">
    </head>
    <body>
        <p class="neon">【前端实验室】分享前端最新、最实用前端技术</p>
    </body>
</html>

로그인 후 복사

IV. 타자기 효과

멋진 텍스트 효과를 얻기 위해 5가지 순수 CSS를 구성하고 공유하세요.

이 효과는 주로 컨테이너의 너비를 변경하여 얻을 수 있습니다.

.typing {
    color: white;
    font-size: 2em;
    width: 21em;
    height: 1.5em;
    border-right: 1px solid transparent;
    animation: typing 2s steps(42, end), blink-caret .75s step-end infinite;
    font-family: Consolas, Monaco;
    word-break: break-all;
    overflow: hidden;
}

로그인 후 복사

/* 打印效果 */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 21em;
    }
}
/* 光标 */
@keyframes blink-caret {
    from,
    to {
        border-color: transparent;
    }
    50% {
        border-color: currentColor;
    }
}

로그인 후 복사

<html>
   <head>
   <link rel="stylesheet" href="./css/typing-style.css">
   </head>
   <body>
   <div class="typing">【前端实验室】分享前端最新、最实用前端技术</div>
</html>

로그인 후 복사

white-space:nowrap 속성은 주로 영문자 표시를 고려하여 문자 끊김이 없도록 이 속성을 제거했습니다.

word-break:break-all을 사용하면 영어 문자를 하나씩 표시할 수 있습니다.

애니메이션 속성의 단계 기능을 사용하면 애니메이션이 연속이 아닌 간헐적으로 실행될 수 있습니다.

steps() 구문은 다음을 나타냅니다. steps(number, position). 여기서 number 키워드는 애니메이션이 분할된 세그먼트 수를 나타냅니다. position 키워드는 애니메이션이 기간의 시작 또는 끝에서 연속되는지 여부를 나타냅니다. start 및 end를 지원하는 단어의 의미는 다음과 같습니다.

start: 직접 시작을 의미합니다.
end: 갑자기 중지한다는 의미이며 이는 기본값입니다.

커서 효과는 다음을 통해 달성됩니다. 상자 그림자 시뮬레이션. 위의 속성을 통해 간단한 타자기 효과를 얻을 수 있습니다~

5. 글리치 스타일 텍스트 효과

멋진 텍스트 효과를 얻기 위해 5가지 순수 CSS를 구성하고 공유하세요.

이 애니메이션 효과는 상대적으로 복잡하며 주로 CSS 의사 요소 및 요소 사용자 정의를 사용합니다. 속성, 마스크 속성, 애니메이션 애니메이션 등

<div class="text" data-text="欢迎关注微信公众号【前端实验室】">
  欢迎关注微信公众号【前端实验室】
</div>

로그인 후 복사

여기에서는 주로 사용자 정의 속성, 데이터 및 사용자 정의 속성 이름을 사용하고 의사 요소가 해당 텍스트를 얻을 수 있도록 표시할 텍스트를 할당합니다.

@keyframes animation-before{
    0% {
        clip-path: inset(0 0 0 0);
    }
    ...
    100% {
        clip-path: inset(.62em 0 .29em 0);
    }
}
@keyframes animation-after{
      0% {
        clip-path: inset(0 0 0 0);
    }
    ...
    100% {
        clip-path: inset(.29em 0 .62em 0);
    }
}

로그인 후 복사

여기에는 애니메이션 이전과 애니메이션 이후라는 두 개의 키프레임이 설정되어 있습니다. 전자는 의사 요소 이전에 대한 것이고 후자는 의사 요소 이후에 대한 것입니다.

clip-path 속성은 CSS3의 새로운 속성 마스크입니다. inset() 값은 마스크의 모양이 직사각형임을 나타냅니다. 마스크의 효과 영역을 정의한 후 @keyframes를 통해 프레임별 애니메이션을 설정합니다. 마스크를 만듭니다. 동작 영역이 수직 방향으로 연속적으로 변경되어 상하 지터링 효과를 얻습니다.

.text{
    display: inline-block;
    font-size: 3.5em;
    font-weight: 600;
    padding: 0 4px;
    color: white;
    position: relative;
}

로그인 후 복사

.text::before{
    content: attr(data-text);
    position: absolute;
    left: -2px;
    width: 100%;
    background: black;
    text-shadow:2px 0 red;
    animation: animation-before 3s infinite linear alternate-reverse;
}

로그인 후 복사

.text::after{
    content: attr(data-text);
    position: absolute;
    left: 2px;
    width: 100%;
    background: black;
    text-shadow: -2px 0 blue;
    animation: animation-after 3s infinite linear alternate-reverse;
}

로그인 후 복사

마지막으로 전후에 두 개의 의사 요소를 설정하고 상위 요소와 동일한 위치에 배치한 다음 왼쪽과 오른쪽으로 각각 조금씩 이동하여 정렬되지 않은 효과를 만든 다음 배경색을 다음으로 설정합니다. 상위 요소의 배경색과 동일한 색상이 상위 요소를 차단하는 데 사용됩니다

이러한 방식으로 완벽한 글리치 스타일의 텍스트 표시 애니메이션을 얻을 수 있습니다~

멋진 특수 효과로 웹 페이지에 다른 스타일을 추가할 수 있습니다 , 이 글에서 달성한 효과의 소스코드가 Github에 업로드 되었습니다. 공식 계정 백그라운드에서 aaa 텍스트에 답글을 달아주시면 받아보실 수 있습니다!

(학습 영상 공유: css 영상 튜토리얼)

위 내용은 멋진 텍스트 효과를 얻기 위해 5가지 순수 CSS를 구성하고 공유하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!