Ajax Loader
×

anggak

HTML
<figure>
1
<figure>
2
  <h1>SERAPHIN HOCHART</h1>
3
  <h1>SERAPHIN HOCHART</h1>
4
  <h1>SERAPHIN HOCHART</h1>
5
  <h1>SERAPHIN HOCHART</h1>
6
  <h1>SERAPHIN HOCHART</h1>
7
  <h1>SERAPHIN HOCHART</h1>
8
  <h1>SERAPHIN HOCHART</h1>
9
  <h1>SERAPHIN HOCHART</h1>
10
  <h1>SERAPHIN HOCHART</h1>
11
  <h1>SERAPHIN HOCHART</h1>
12
</figure>
 
CSS
@import url(http://fonts.googleapis.com/css?family=Concert+One);
1
@import url(http://fonts.googleapis.com/css?family=Concert+One);
2
 
3
h1 {
4
  animation:glow 10s ease-in-out infinite;
5
  
6
  
7
 
8
/* For less laggy effect, uncomment this:
9
=========== */
10
  animation:none;
11
  -webkit-text-stroke:1px #fff; 
12
  
13
}
14
 
15
 
16
 
17
* { box-sizing:border-box; }
18
 
19
body {
20
  background:#0a0a0a;
21
  overflow:hidden;
22
  text-align:center;
23
}
24
 
25
figure {
26
  animation:wobble 5s ease-in-out infinite;
27
  transform-origin:center center;
28
  transform-style:preserve-3d;
29
}
30
 
31
@keyframes wobble {
32
  0%,100%{ transform:rotate3d(1,1,0,40deg); }
33
  50%{ transform:rotate3d(-1,1,0,40deg); }
34
  
35
}
36
 
37
h1 {
38
  display:block;
39
  width:100%;
40
  padding:40px;
41
  line-height:1.5;
42
  font:900 8em 'Concert One', sans-serif;
43
  text-transform:uppercase;
44
  position:absolute;
45
  color:#0a0a0a;
46
}
47
 
48
@keyframes glow {
49
  0%,100%{ text-shadow:0 0 30px red; }
50
  25%{ text-shadow:0 0 30px orange; }
51
  50%{ text-shadow:0 0 30px forestgreen; }
52
  75%{ text-shadow:0 0 30px cyan; }
53
}
54
 
55
h1:nth-child(2){ transform:translateZ(5px); }
56
h1:nth-child(3){ transform:translateZ(10px);}
57
h1:nth-child(4){ transform:translateZ(15px); }
58
h1:nth-child(5){ transform:translateZ(20px); }
59
h1:nth-child(6){ transform:translateZ(25px); }
60
h1:nth-child(7){ transform:translateZ(30px); }
61
h1:nth-child(8){ transform:translateZ(35px); }
62
h1:nth-child(9){ transform:translateZ(40px); }
63
h1:nth-child(10){ transform:translateZ(45px); }
 

anggak

CSSDeck G+