Ajax Loader
HTML 
<div id="negro">
1
<div id="negro">
2
<div id="cabelo"></div>
3
  <div id="rosto">
4
    <div id="oculos1">
5
    </div>
6
    <div id="oculos2">
7
    </div>
8
    <hr>
9
    <div id="boca1"></div>
10
    <div id="boca2"></div>
11
  </div>
12
</div>
 
CSS 
body{
1
body{
2
background-color:#C1C1C1;
3
}
4
#negro{
5
  overflow:hidden;
6
  width:600px;
7
  height:600px;
8
9
}
10
 
11
#rosto{
12
  margin-top:20%;
13
  margin-left:20%;
14
  background-color:rgba(101,81,65,1);
15
  width:400px;
16
  height:400px;
17
  border-top-left-radius:200px;
18
  border-top-right-radius:200px;
19
  border-bottom-right-radius:400px;
20
  border-bottom-left-radius:400px;
21
22
 -moz-border-top-left-radius:200px;
23
 -moz-border-top-right-radius:200px;
24
 -moz-border-bottom-right-radius:400px;
25
 -moz-border-bottom-left-radius:400px;
26
27
  border-top:black;
28
29
30
}
31
#oculos1{
32
  position:relative;
33
  background-color:black;
34
  width:180px;
35
  height:150px;
36
  margin-top:25%;
37
  border-top-left-radius:200px;
38
  border-top-right-radius:0px;
39
  border-bottom-right-radius:400px;
40
  border-bottom-left-radius:400px;
41
42
  -moz-border-top-left-radius:200px;
43
  -moz-border-top-right-radius:0px;
44
  -moz-border-bottom-right-radius:400px;
45
  -moz-border-bottom-left-radius:400px;
46
47
  border:10px solid white;
48
  float:left;
49
50
  -webkit-animation: cor 5s infinite;
51
    animation: cor 5s infinite;
52
53
  -webkit-animation-play-state: paused;
54
    animation-play-state: paused;
55
}
56
 
57
#oculos2{
58
  position:relative;
59
  background-color:black;
60
  width:180px;
61
  height:150px;
62
  margin-top:25%;
63
  border-top-left-radius:0px;
64
  border-top-right-radius:200px;
65
  border-bottom-right-radius:400px;
66
  border-bottom-left-radius:400px;
67
68
  -moz-border-top-left-radius:0px;
69
  -moz-border-top-right-radius:200px;
70
  -moz-border-bottom-right-radius:400px;
71
  -moz-border-bottom-left-radius:400px;
72
73
  border:10px solid white;
74
  float:right;
75
76
  -webkit-animation: cor 5s infinite;
77
    animation: cor 5s infinite;
78
79
  -webkit-animation-play-state: paused;
80
    animation-play-state: paused;
81
}
82
 
83
hr{
84
  position:relative;
85
  width:30px;
86
  border-color:black;
87
  margin-top:70%;
88
  margin-left:45%;
89
}
90
 
91
#boca1{
92
  width:150px;
93
  margin-left:33%;
94
  margin-top:35px;
95
  border-top-left-radius:0px;
96
  border-top-right-radius:0px;
97
  border-bottom-right-radius:20px;
98
  border-bottom-left-radius:20px;
99
100
  -moz-border-top-left-radius:0px;
101
  -moz-border-top-right-radius:0px;
102
  -moz-border-bottom-right-radius:20px;
103
  -moz-border-bottom-left-radius:20px;
104
105
  border-top:3px solid;
106
107
}
108
 
109
#boca2{
110
  width:100px;
111
  height:5px;
112
  margin-left:38%;
113
  margin-top:10px;
114
  border-top-left-radius:0px;
115
  border-top-right-radius:0px;
116
  border-bottom-right-radius:20px;
117
  border-bottom-left-radius:20px;
118
119
  -moz-border-top-left-radius:0px;
120
  -moz-border-top-right-radius:0px;
121
  -moz-border-bottom-right-radius:20px;
122
  -moz-border-bottom-left-radius:20px;
123
124
  box-shadow:0px 0px 20px rgba(85,69,55,1);
125
  border-bottom:3px solid;
126
127
}
128
 
129
#cabelo{
130
  width:550px;
131
  height:400px;
132
  margin-top:8px;
133
  margin-left:38px;
134
  background-color:black;
135
  margin-bottom:-400px;
136
  border-radius:200px;
137
  -moz-border-radius:200px;
138
}
139
 
140
#rosto:hover > #oculos2, #rosto:hover >  #oculos1{
141
  -webkit-animation: cor 5s;
142
    animation: cor 5s;
143
  -webkit-animation-play-state: state;
144
    animation-play-state: state;
145
}
146
 
147
@-webkit-keyframes cor {
148
     5% {background: black; border-color:white;}
149
    25% {background: blue; border-color:green;}
150
    50% {background: green; border-color:yellow;}
151
    100% {background: red; border-color:black;}
152
}
153
 
154
@keyframes cor {
155
     5% {background: black; border-color:white;}
156
    25% {background: blue; border-color:green;}
157
    50% {background: green; border-color:yellow;}
158
    100% {background: red; border-color:black;}
159
}
160
 
 

hover me brother

CSSDeck G+