1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 666768697071727374757677787980818283848586878889909192 |
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
; }
}
|