純粋な css3_html/css_WEB-ITnose で実装されたテキストの照明効果

1. [写真] 201411232307357663.jpg

2. [コード][HTML] コード

1

Shiny

3. [コード][CSS]コード

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

88

89

90

91

92

ボディ

{

背景 : #111 ;

}

.shiny

{

color: #F5C21B; : -webkit-gradient(linear, 左上, 左下, from( #F5C21B ), to( #D17000 ));

-webkit-background- クリップ : テキスト;

-webkit-text-fill- color : 透明;

表示 : ブロック ;

幅 : 610px ;

マージン : 自動 ;

font-family : "Source Sans Pro" 、サンセリフ ;

フォントサイズ : 13em ;

フォントの太さ : 900 ;

位置 : 相対的;

text-transform : 大文字 ;

}

.shiny::before

{

背景位置 : -180px ;

-webkit-animation: フレア 5 秒無限。

-webkit-animation-timing-function: リニア;

背景画像 : Linear-gradient( 65 deg, 透明 20% , rgba( 255 , 255 , 255 , 0.2 ) 20% , rgba( 255 , 255 , 255 , 0.3 ) 27% , 透明 27% , 透明 100% );

-webkit-background- クリップ : テキスト;

-webkit-text-fill- color : 透明;

コンテンツ : 「光沢のある」 ;

カラー : #FFF ;

表示 : ブロック ;

パディング右 : 140px ;

位置: 絶対;

}

.shiny::after

{

content : "光沢" ;

カラー : #FFF ;

表示 : ブロック ;

位置: 絶対;

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 #6 E4414 、0 9px #6E4414 、0 10px #6E4414 ;

トップ : 0 ;

z インデックス : -1 ;

}

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

{

-webkit-animation: スパークル 5 秒無限;

-webkit-animation-timing-function: リニア;

背景 : #FFF ;

境界半径: 100% ;

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 ;

コンテンツ : "" ;

表示 : ブロック ;

高さ: 10px ;

不透明度: 0.7 ;

位置: 絶対;

幅: 10px ;

}

.inner-shiny::before

{

-webkit-animation-delay: 0.2 s;

高さ: 7px ;

左 : 0.12em ;

トップ: 0.8em ;

幅: 7px ;

}

.inner-shiny::after

{

トップ : 0.32em ;

右: -5px ;

}

@-webkit-keyframes フレア

{

0% { 背景位置 : -180px ; }

30% { 背景位置 : 500px ; }

100% {background-position : 500px ; }

}

@-webkit-keyframes キラキラ

{

0% { 不透明度: 0 ; }

30% { 不透明度: 0 ; }

40% { 不透明度: 0.8 ; }

60% { 不透明度: 0 ; }

100% { 不透明度: 0 ;