首頁 > web前端 > css教學 > css3如何實現文字漸層? css3實作文字漸層的三種方法(程式碼)

css3如何實現文字漸層? css3實作文字漸層的三種方法(程式碼)

不言
發布: 2018-08-21 10:33:31
原創
46528 人瀏覽過

這篇文章帶給大家的內容是關於css3如何實現文字漸層? css3實現文字漸層的三種方法(程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

在開發過程中,UI設計師常會設計一些帶有漸層文字的設計圖,給到我們程式設計師,而我們程式設計師呢,大多都是默默地嘆息傳來,不過CSS3的誕生,解決了前端開發過程中的好多個難題,例如動畫,遮罩等等

#1. 我們今天要實現的就是使用純CSS實現漸變文字,以下是預覽圖片:

css3如何實現文字漸層? css3實作文字漸層的三種方法(程式碼)

css3如何實現文字漸層? css3實作文字漸層的三種方法(程式碼)

css3如何實現文字漸層? css3實作文字漸層的三種方法(程式碼)

#2. 基礎樣式:

1

2

3

4

5

6

7

8

.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:

1

2

3

4

5

.gradient-text-one{ 

    background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

登入後複製

4. 第二種方法,使用mask-image:

1

2

3

4

5

6

7

8

9

10

11

12

13

.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.第三種方法,使用linearGradient、fill:

1

2

3

4

5

.gradient-text-three{

    fill:url(#SVGID_1_);

    font-size:40px;

    font-weight:bolder;

}

登入後複製

1

2

3

4

5

6

7

8

9

10

<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. 此DEMO全部程式碼:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

<!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>

登入後複製

相關推薦:

css的進度條文字根據進度漸進

#DIV CSS JS實作的文字色彩漸層(轉載)_html/css_WEB-ITnose

css3文字漸層動畫

以上是css3如何實現文字漸層? css3實作文字漸層的三種方法(程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板