CSS3를 사용하여 텍스트 스트리머 그라데이션 효과를 만드는 방법에 대한 자세한 예-CSS 튜토리얼-php.cn

CSS3를 사용하여 텍스트 스트리머 그라데이션 효과를 만드는 방법에 대한 자세한 예

PHP中文网

풀어 주다： 2018-11-06 15:49:04

앞으로

4820명이 탐색했습니다.

이 글은 주로 CSS3를 이용한 텍스트 스트리머 그라데이션 효과 제작 방법을 소개합니다. 관심 있는 친구들이 참고하시면 좋을 것 같습니다.

먼저 렌더링

다음은 코드입니다

HTML 부분

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<p class="masked">
    <h4>日暮苍山远，天寒白屋贫。柴门闻犬吠，风雪夜归人。</h4>
</p>

</body>
</html>

로그인 후 복사

CSS 부분

    <style>
        .masked h4{
            display: block;
            width: 600px;
            height: 100px;
            /*渐变背景*/
            background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
            #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
            color: transparent; /*文字填充色为透明*/
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;          /*背景剪裁为文字，只将文字显示为背景*/
            background-size: 200% 100%;            /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
            /* 动画 */
            animation: masked-animation 4s infinite linear;
        }
        @keyframes masked-animation {
            0% {
                background-position: 0 0;   /*background-position 属性设置背景图像的起始位置。*/
            }
            100% {
                background-position: -100% 0;
            }
        }
    </style>

로그인 후 복사

사실 이것은 매우 간단한 예입니다. 여기서는 주로 문서를 찾을 수 있기 때문에 속성의 역할에 대해 자세히 설명하지 않겠습니다.

1. 선형 그라데이션 속성은 텍스트에 선형 그라데이션 배경색을 추가합니다.