Ajax Loader
×
HTML 
<div id="shape"></div>
1
<div id="shape"></div>
2
<div id="head"></div>
3
<div id="shape2"></div>
4
<div id="shape3"></div>
5
 
 
CSS 
div {position: absolute;  background: #78C485;}
1
div {position: absolute;  background: #78C485;}
2
 
3
#shape {
4
  width: 240px;
5
  height: 160px;
6
  top:240px;
7
  border-radius: 0;
8
  border-radius: 60% 20% 80% 20%;
9
  background: #629E69;
10
  z-index: 9;
11
}
12
 
13
#head {
14
  width: 120px;
15
  height: 90px;
16
  top:260px;
17
  margin-left: 218px;
18
  border-radius: 0;
19
  border-radius: 80% 60% 50% 20%;
20
}
21
 
22
 
23
#shape2 {
24
  width: 120px;
25
  height: 120px;
26
  top:320px;
27
  left:200px;
28
  -ms-transform: rotate(90deg);
29
  -webkit-transform: rotate(90deg);
30
  transform: rotate(90deg);
31
}
32
 
33
#shape3 {
34
  width: 120px;
35
  height: 120px;
36
  top:320px;
37
  left:200px;
38
  margin-left:120px;
39
40
}
41
 
42
/* animation test */
43
 
44
 
45
#shape, #head {
46
  -webkit-animation: move 6s cubic-bezier(.14, .75, .2, 1.01) infinite;
47
  -moz-animation: move 6s cubic-bezier(.14, .75, .2, 1.01) infinite;
48
  animation: move 6s cubic-bezier(.14, .75, .2, 1.01) infinite;
49
}
50
 
51
#shape2, #shape3 {
52
  -webkit-animation: walk 6s cubic-bezier(.14, .75, .2, 1.01) infinite;
53
  -moz-animation: walk 6s cubic-bezier(.14, .75, .2, 1.01) infinite;
54
  animation: walk 6s cubic-bezier(.14, .75, .2, 1.01) infinite;
55
}
56
 
57
@-webkit-keyframes walk {
58
59
}
60
@-moz-keyframes walk {
61
62
}
63
@keyframes walk {
64
  0% {left:20%%;border-radius:0 0 0 0;}
65
  10% {left:25%;border-radius:50% 10% 100% 10%;}
66
  20% {left:30%;border-radius:0% 50% 10% 100%;}
67
  30% {left:35%;border-radius:50% 10% 100% 10%;}
68
  40% {left:40%;border-radius:0% 50% 10% 100%;}
69
  50% {left:45%;border-radius:50% 10% 100% 10%;}
70
  60% {left:50%;border-radius:0% 50% 10% 100%;}
71
  70% {left:55%;border-radius:50% 10% 100% 10%;}
72
  80% {left:60%;border-radius:0% 50% 10% 100%;}
73
  90% {left:65%;border-radius:50% 10% 100% 10%;}
74
  100% {left:70%;border-radius:0% 50% 10% 100%;}
75
}
76
 
77
@-webkit-keyframes move {
78
79
}
80
@-moz-keyframes move {
81
82
}
83
@keyframes move {
84
  0% {left:20%%;}
85
  10% {left:25%;}
86
  20% {left:30%;}
87
  30% {left:35%;}
88
  40% {left:40%;}
89
  50% {left:45%;}
90
  60% {left:50%;}
91
  70% {left:55%;}
92
  80% {left:60%;}
93
  90% {left:65%;}
94
  100% {left:70%;}
95
}
96
 
97
 
98
 
99
 
100
 
101
 
102
 
103
 
104
 
105
 
 

The Turtle Test

CSSDeck G+