如何利用純css3實現文字亮光特效

這篇文章主要講解了“如何利用純css3實現文字亮光特效”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何利用純css3實現文字亮光特效”吧！

　　今天給大家分享一款純css3實現的文字亮光特效。這款特效文字上一道亮光逐漸掃過文字。效果非常漂亮。一起看下效果：

　　實現的代碼。

　　html代碼：

XML/HTML Code復制內容到剪貼板

1. <span class="shiny"><span class="inner-shiny">Shiny</span> </span>  

　　css3代碼：

CSS Code復制內容到剪貼板

1. body   

2. {   

3.   background: #111;   

4. }   

5.   

6. .shiny   

7. {   

8.   color: #F5C21B;   

9.   background: -webkit-gradient(linear, left top, left bottombottom, from(#F5C21B), to(#D17000));   

10.   -webkit-background-clip: text;   

11.   -webkit-text-fill-color: transparent;   

12.   display:block;   

13.   width:610px;   

14.   margin:auto;   

15.   font-family: "Source Sans Pro", sans-serif;   

16.   font-size: 13em;   

17.   font-weight: 900;   

18.   position: relative;   

19.   text-transform: uppercase;   

20. }   

21.   

22. .shiny::before   

23. {   

24.     background-position: -180px;   

25.     -webkit-animation: flare 5s infinite;   

26.   -webkit-animation-timing-function: linear;   

27.   background-image: linear-gradient(65deg, transparent 20%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.3) 27%, transparent 27%, transparent 100%);   

28.   -webkit-background-clip: text;   

29.   -webkit-text-fill-color: transparent;   

30.   content: "Shiny";   

31.   color: #FFF;   

32.   display: block;   

33.   padding-right: 140px;   

34.   position: absolute;   

35. }   

36.   

37. .shiny::after   

38. {   

39.   content: "Shiny";   

40.   color: #FFF;   

41.   display: block;   

42.   position: absolute;   

43.   text-shadow: 0 1px #6E4414, 0 2px #6E4414, 0 3px #6E4414, 0 4px #6E4414, 0 5px #6E4414, 0 6px #6E4414, 0 7px #6E4414, 0 8px #6E4414, 0 9px #6E4414, 0 10px #6E4414;   

44.   top: 0;   

45.   z-index: -1;   

46. }   

47.   

48. .inner-shiny::after, .inner-shiny::before   

49. {   

50.         -webkit-animation: sparkle 5s infinite;   

51.   -webkit-animation-timing-function: linear;   

52.     background: #FFF;   

53.   border-radius: 100%;   

54.   box-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #FFF, 0 0 25px #FFF, 0 0 30px #FFF, 0 0 35px #FFF;   

55.   content: "";   

56.   display: block;   

57.   height: 10px;   

58.   opacity: 0.7;   

59.   position: absolute;   

60.   width: 10px;   

61. }   

62.   

63. .inner-shiny::before   

64. {   

65.     -webkit-animation-delay: 0.2s;   

66.   height: 7px;   

67.   left: 0.12em;   

68.   top: 0.8em;   

69.   width: 7px;   

70. }   

71.   

72. .inner-shiny::after   

73. {   

74.   top: 0.32em;   

75.   rightright: -5px;   

76. }   

77.   

78. @-webkit-keyframes flare   

79. {   

80.   0%   { background-position: -180px; }   

81.   30%  { background-position: 500px; }   

82.   100% { background-position: 500px; }   

83. }   

84.   

85. @-webkit-keyframes sparkle   

86. {   

87.   0%   { opacity: 0; }   

88.   30%  { opacity: 0; }   

89.   40%  { opacity: 0.8; }   

90.   60%  { opacity: 0; }   

91.   100% { opacity: 0; }   

92. }  

感謝各位的閱讀，以上就是“如何利用純css3實現文字亮光特效”的內容了，經過本文的學習后，相信大家對如何利用純css3實現文字亮光特效這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！