1.?[圖片]?201411232307357663.jpg? ?

2.?[代碼][HTML]代碼 ? ??

1

Shiny span > span >

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

body

{

?? background : #111 ;

}

?

.shiny

{

?? color : #F5C21B ;

?? background : -webkit-gradient(linear, left top , left bottom , from( #F5C21B ), to( #D17000 ));

?? -webkit-background- clip : text;

?? -webkit-text-fill- color : transparent ;

?? display : block ;

?? width : 610px ;

?? margin : auto ;

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

?? font-size : 13em ;

?? font-weight : 900 ;

?? position : relative ;

?? text-transform : uppercase ;

}

?

.shiny::before

{

???? background-position : -180px ;

???? -webkit-animation: flare 5 s infinite;

?? -webkit-animation-timing-function: linear;

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

?? -webkit-background- clip : text;

?? -webkit-text-fill- color : transparent ;

?? content : "Shiny" ;

?? color : #FFF ;

?? display : block ;

?? padding-right : 140px ;

?? position : absolute ;

}

?

.shiny::after

{

?? content : "Shiny" ;

?? color : #FFF ;

?? display : block ;

?? position : absolute ;

?? 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 ;

?? top : 0 ;

?? z-index : -1 ;

}

?

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

{

???????? -webkit-animation: sparkle 5 s infinite;

?? -webkit-animation-timing-function: linear;

???? background : #FFF ;

?? border-radius: 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 ;

?? content : "" ;

?? display : block ;

?? height : 10px ;

?? opacity: 0.7 ;

?? position : absolute ;

?? width : 10px ;

}

?

.inner-shiny::before

{

???? -webkit-animation-delay: 0.2 s;

?? height : 7px ;

?? left : 0.12em ;

?? top : 0.8em ;

?? width : 7px ;

}

?

.inner-shiny::after

{

?? top : 0.32em ;

?? right : -5px ;

}

?

@-webkit-keyframes flare

{

?? 0%?? { background-position : -180px ; }

?? 30%? { background-position : 500px ; }

?? 100% { background-position : 500px ; }

}

?

@-webkit-keyframes sparkle

{

?? 0%?? { opacity: 0 ; }

?? 30%? { opacity: 0 ; }

?? 40%? { opacity: 0.8 ; }

?? 60%? { opacity: 0 ; }

?? 100% { opacity: 0 ; }

}