CSS3에서 텍스트 그라디언트를 구현하는 방법은 무엇입니까? CSS3에서 텍스트 그라데이션을 구현하는 세 가지 방법(코드)-CSS 튜토리얼-php.cn

CSS3에서 텍스트 그라디언트를 구현하는 방법은 무엇입니까? CSS3에서 텍스트 그라데이션을 구현하는 세 가지 방법(코드)

不言

풀어 주다： 2018-08-21 10:33:31

원래의

46489명이 탐색했습니다.

이 글의 내용은 CSS3에서 텍스트 그라데이션을 구현하는 방법에 관한 것입니다. CSS3에서 텍스트 그라데이션을 구현하는 세 가지 방법(코드)에는 특정 참조 값이 있으므로 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

개발 과정에서 UI 디자이너는 종종 그라데이션 텍스트로 일부 디자인 도면을 디자인하여 프로그래머에게 제공합니다. 그러나 대부분의 프로그래머는 조용히 한숨을 쉬었습니다. 그러나 CSS3의 탄생은 많은 문제를 해결했습니다. 애니메이션, 마스킹 등과 같은 프런트 엔드 개발 프로세스

1. 오늘 우리가 달성하고 싶은 것은 순수 CSS를 사용하여 그라데이션 텍스트를 구현하는 것입니다.

CSS3에서 텍스트 그라디언트를 구현하는 방법은 무엇입니까? CSS3에서 텍스트 그라데이션을 구현하는 세 가지 방법(코드)

2. 기본 스타일:

.gradient-text{
              text-align: left;
              text-indent:30px;
              line-height: 50px;
              font-size:40px;
              font-weight:bolder; 
              position: relative; 
              }

로그인 후 복사

3. 첫 번째 방법은 background-cli, text-fill-color를 사용합니다.

.gradient-text-one{  
    background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; 
}

로그인 후 복사

4 두 번째 방법은 마스크 이미지를 사용합니다.

.gradient-text-two{
   color:red;
}
.gradient-text-two[data-content]::after{
    content:attr(data-content);
    display: block;
    position:absolute;
    color:yellow;
    left:0;
    top:0;
    z-index:2;
    -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
}

로그인 후 복사

5. 선형Gradient, 채우기:

.gradient-text-three{
    fill:url(#SVGID_1_);
    font-size:40px;
    font-weight:bolder;
}

로그인 후 복사

<svg viewBoxs="0 0 500 300" class="svgBox">
    <defs>
        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
            <stop  offset="0" style="stop-color:yellow"/>
            <stop  offset="0.5" style="stop-color:#fd8403"/>
            <stop  offset="1" style="stop-color:red"/>
        </linearGradient>
    </defs>
    <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text>
</svg>

로그인 후 복사

6. 이 데모의 모든 코드:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>CSS3渐变字体</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        *{margin:0;padding:0;}
        body,html{width:100%;height:100%;}
        .wrapper{width:80%;margin:0 auto;margin-top:30px;}
        .gradient-text{
                text-align: left;
                text-indent:30px;
                line-height: 50px;
                font-size:40px;
                font-weight:bolder; 
                position: relative; 
                }
        .gradient-text-one{  
            background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
            -webkit-background-clip:text; 
            -webkit-text-fill-color:transparent; 
        }
        .gradient-text-two{
            color:red;
        }
        .gradient-text-two[data-content]::after{
            content:attr(data-content);
            display: block;
            position:absolute;
            color:yellow;
            left:0;
            top:0;
            z-index:2;
            -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
        }
        .gradient-text-three{
            fill:url(#SVGID_1_);
            font-size:40px;
            font-weight:bolder;
        }
    </style>
</head>
<body>
    <section class="wrapper">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">方法1. background-clip + text-fill-color</h3>
            </div>
            <div class="panel-body">
                <h3 class="gradient-text gradient-text-one">花样年华</h3>
            </div>
        </div>
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title">方法2. mask-image</h3>
            </div>
            <div class="panel-body">
                <h3 class="gradient-text gradient-text-two" data-content="豆蔻年华">豆蔻年华</h3>
            </div>
        </div>
        <div class="panel panel-danger">
            
            <div class="panel-heading">
                <h3 class="panel-title">方法3. svg linearGradient</h3>
            </div>
 
            <div class="panel-body">
                <svg viewBoxs="0 0 500 300" class="svgBox">
                    <defs>
                        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
                            <stop  offset="0" style="stop-color:yellow"/>
                            <stop  offset="0.5" style="stop-color:#fd8403"/>
                            <stop  offset="1" style="stop-color:red"/>
                        </linearGradient>
                    </defs>
                    <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text>
                </svg>
            </div>
 
        </div>
    </section>
</body>
</html>

로그인 후 복사