html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin:0;
padding:0;
border:0;
font:inherit;
font-size:100%;
vertical-align:baseline;
}
html {
line-height:1;
}
ol,ul {
list-style:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}
caption,th,td {
text-align:left;
font-weight:normal;
vertical-align:middle;
}
q,blockquote {
quotes:none;
}
q:before,q:after,blockquote:before,blockquote:after {
content:"";
content:none;
}
a img {
border:none;
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
display:block;
}
/***********VARIABLES***********/
/*Movement*/
/*Colors*/
/***********STYLES***********/
body {
background-color:#d4e7ba;
}
/*.ele-container {
background:-webkit-linear-gradient(top,rgba(0,141,210,0.63) 0%,transparent 100%);
background:linear-gradient(to bottom,rgba(0,141,210,0.63) 0%,transparent 100%);
height:500px;
overflow:hidden;
position:relative;
width:100%;
}
*/
.ele-wrapper {
-webkit-animation:ele-movement 1s infinite linear;
animation:ele-movement 1s infinite linear;
left:50%;
position:absolute;
top:50%;
-webkit-transform:translate3D(-50%,-75%,0);
-ms-transform:translate3D(-50%,-75%,0);
transform:translate3D(-50%,-75%,0);
width:200px;
}
.ele-body {
-webkit-animation:body-movement 1s infinite cubic-bezier(0.63,0.15,0.49,0.93);
animation:body-movement 1s infinite cubic-bezier(0.63,0.15,0.49,0.93);
background:-webkit-linear-gradient(top,#cfcfcf 0%,#9c9c9c 70%);
background:linear-gradient(to bottom,#cfcfcf 0%,#9c9c9c 70%);
border:1px solid #808080;
border-radius:100px 50px 70px 60px;
height:165px;
position:relative;
width:100%;
z-index:1;
}
.ele-tail {
-webkit-animation:tail-movement 1s infinite cubic-bezier(0.63,0.15,0.49,0.93);
animation:tail-movement 1s infinite cubic-bezier(0.63,0.15,0.49,0.93);
border-top:7px solid #808080;
border-radius:50%;
height:50px;
position:absolute;
-webkit-transform:translate3d(-3%,69%,0) rotateZ(-20deg);
transform:translate3d(-3%,69%,0) rotateZ(-20deg);
width:64px;
}
.ele-tail:before {
border-top:5px solid #C2C2C2;
border-radius:50%;
content:'';
height:50px;
position:absolute;
width:64px;
top:-6px;
}
.ele-head {
-webkit-animation:head-movement 2s infinite linear;
animation:head-movement 2s infinite linear;
background:#C2C2C2;
border-radius:50%;
border-top:1px solid #808080;
box-shadow:-1px 1px 2px #808080;
height:150px;
position:absolute;
-webkit-transform:translate3d(80%,-25%,0);
transform:translate3d(80%,-25%,0);
width:155px;
}
.ele-eyes:before,.ele-eyes:after {
-webkit-animation:eyes-blink 3.5s infinite linear;
animation:eyes-blink 3.5s infinite linear;
background-color:#FDFDFD;
border-radius:50%;
bottom:-48px;
content:'';
height:10px;
position:absolute;
width:10px;
}
.ele-eyebrows {
-webkit-animation:eyebrows-movement 1s infinite cubic-bezier(0.63,0.15,0.49,0.93);
animation:eyebrows-movement 1s infinite cubic-bezier(0.63,0.15,0.49,0.93);
background:-webkit-linear-gradient(bottom,#C2C2C2 20%,#9c9c9c 100%);
background:linear-gradient(to top,#C2C2C2 20%,#9c9c9c 100%);
border-radius:10px;
border-top:1px solid #808080;
bottom:88px;
height:20px;
left:92px;
position:absolute;
width:60px;
}
.ele-eyes {
left:60%;
position:absolute;
top:6%;
}
.ele-eyes:before {
left:41px;
}
.ele-eyes:after {
left:10px;
}
.ele-ear {
-webkit-animation:ear-movement 1s infinite linear;
animation:ear-movement 1s infinite linear;
background:-webkit-linear-gradient(right,#C2C2C2 10%,darkgray 100%);
background:linear-gradient(to left,#C2C2C2 10%,darkgray 100%);
border-bottom:1px solid #808080;
border-left:1px solid #808080;
border-top:1px solid #808080;
border-radius:60px 0 0 50%;
height:110px;
left:-22px;
position:absolute;
top:25px;
-webkit-transform:rotateZ(-10deg);
transform:rotateZ(-10deg);
width:60px;
}
.ele-mouth {
-webkit-animation:mouth-movement 1s infinite linear;
animation:mouth-movement 1s infinite linear;
background:-webkit-linear-gradient(top,#C2C2C2 50%,darkgray 100%);
background:linear-gradient(to bottom,#C2C2C2 50%,darkgray 100%);
border-radius:0px 100% 0px 0px;
border-top:2px solid #808080;
height:160px;
left:83%;
position:absolute;
top:35%;
width:30px;
}
.ele-mouth:before {
-webkit-animation:mouth-after-movement 1s infinite linear;
animation:mouth-after-movement 1s infinite linear;
background-color:darkgray;
border-bottom:1px solid #808080;
border-left:1px solid #808080;
border-radius:8px;
bottom:0;
content:'';
height:15px;
left:-5px;
position:absolute;
width:40px;
}
.ele-fang-front,.ele-fang-back {
border-bottom:12px solid #FFF;
border-radius:50%;
height:40px;
position:absolute;
-webkit-transform:rotateZ(20deg);
transform:rotateZ(20deg);
width:50px;
}
.ele-fang-front {
box-shadow:0px 1px 0px #808080;
left:100px;
top:100px;
}
.ele-fang-front:before {
background-color:#C2C2C2;
bottom:-10px;
content:'';
height:45px;
left:-5px;
position:absolute;
width:15px;
}
.ele-fang-front:after {
background-color:#C2C2C2;
border-radius:0 50% 50% 0;
bottom:-14px;
box-shadow:1px 1px 0px #808080;
content:'';
height:21px;
left:6px;
position:absolute;
-webkit-transform:rotateZ(20deg);
transform:rotateZ(20deg);
width:15px;
}
.ele-fang-back {
border-bottom-color:#e6e6e6;
left:115px;
top:95px;
z-index:-1;
}
.ele-fang-back:before {
background-color:#C2C2C2;
bottom:-10px;
content:'';
height:25px;
position:absolute;
width:30px;
}
div[class^="ele-leg-"] {
border-left:1px solid #808080;
height:88px;
position:absolute;
width:50px;
}
div[class^="ele-leg-"]:before {
background-color:rgba(74,74,74,0.53);
border-radius:50%;
bottom:-30px;
box-shadow:0 0 2px rgba(74,74,74,0.53);
content:'';
height:10px;
left:50%;
position:absolute;
-webkit-transform:translateX(-50%) rotateZ(0deg);
transform:translateX(-50%) rotateZ(0deg);
width:50px;
}
.ele-leg-front {
background-color:#9c9c9c;
top:100%;
z-index:1;
}
.ele-leg-front .ele-foot {
background-color:#9c9c9c;
}
.ele-leg-back {
background-color:#828282;
top:95%;
}
.ele-leg-back .ele-foot {
background-color:#828282;
}
.ele-leg-back .ele-foot:before,.ele-leg-back .ele-foot:after {
background-color:#bababa;
}
.ele-leg-1 {
-webkit-animation:leg-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) 0s;
animation:leg-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) 0s;
right:57.5%;
}
.ele-leg-1:before {
-webkit-animation:foot-shadow-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) 0s;
animation:foot-shadow-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) 0s;
}
.ele-leg-1 .ele-foot {
-webkit-animation:foot-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) 0s;
animation:foot-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) 0s;
}
.ele-leg-2 {
-webkit-animation:leg-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) -1s;
animation:leg-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) -1s;
right:67.5%;
}
.ele-leg-2:before {
-webkit-animation:foot-shadow-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) -1s;
animation:foot-shadow-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) -1s;
}
.ele-leg-2 .ele-foot {
-webkit-animation:foot-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) -1s;
animation:foot-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) -1s;
}
.ele-leg-3 {
-webkit-animation:leg-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) -1s;
animation:leg-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) -1s;
right:5%;
}
.ele-leg-3:before {
-webkit-animation:foot-shadow-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) -1s;
animation:foot-shadow-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) -1s;
}
.ele-leg-3 .ele-foot {
-webkit-animation:foot-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) -1s;
animation:foot-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) -1s;
}
.ele-leg-4 {
-webkit-animation:leg-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) 0s;
animation:leg-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) 0s;
right:15%;
}
.ele-leg-4:before {
-webkit-animation:foot-shadow-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) 0s;
animation:foot-shadow-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) 0s;
}
.ele-leg-4 .ele-foot {
-webkit-animation:foot-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) 0s;
animation:foot-animation 2s infinite cubic-bezier(0.63,0.15,0.49,0.93) 0s;
}
.ele-foot:before,.ele-foot:after {
background-color:#E0E0E0;
border-radius:10px 10px 0 0;
bottom:0;
content:'';
height:15px;
position:absolute;
width:11px;
}
.ele-foot {
border-radius:25px 25px 35% 40%;
bottom:-17.5px;
box-shadow:-1px 1px 0px #808080;
height:35px;
left:50%;
overflow:hidden;
position:absolute;
-webkit-transform:translateX(-49%) rotateZ(0deg);
transform:translateX(-49%) rotateZ(0deg);
width:55px;
}
.ele-foot:before {
right:-7.5px;
}
.ele-foot:after {
bottom:-3px;
right:5px;
}
@-webkit-keyframes leg-animation {
0% {
height:65px;
-webkit-transform:translate3d(0,-90%,0) rotate3d(0,0,1,10deg) translate3d(0,30%,0);
transform:translate3d(0,-90%,0) rotate3d(0,0,1,10deg) translate3d(0,30%,0);
}
25% {
height:40px;
}
50% {
height:65px;
-webkit-transform:translate3d(0,-90%,0) rotate3d(0,0,1,-15deg) translate3d(0,30%,0);
transform:translate3d(0,-90%,0) rotate3d(0,0,1,-15deg) translate3d(0,30%,0);
}
75% {
height:65px;
}
100% {
height:65px;
-webkit-transform:translate3d(0,-90%,0) rotate3d(0,0,1,10deg) translate3d(0,30%,0);
transform:translate3d(0,-90%,0) rotate3d(0,0,1,10deg) translate3d(0,30%,0);
}
}@keyframes leg-animation {
0% {
height:65px;
-webkit-transform:translate3d(0,-90%,0) rotate3d(0,0,1,10deg) translate3d(0,30%,0);
transform:translate3d(0,-90%,0) rotate3d(0,0,1,10deg) translate3d(0,30%,0);
}
25% {
height:40px;
}
50% {
height:65px;
-webkit-transform:translate3d(0,-90%,0) rotate3d(0,0,1,-15deg) translate3d(0,30%,0);
transform:translate3d(0,-90%,0) rotate3d(0,0,1,-15deg) translate3d(0,30%,0);
}
75% {
height:65px;
}
100% {
height:65px;
-webkit-transform:translate3d(0,-90%,0) rotate3d(0,0,1,10deg) translate3d(0,30%,0);
transform:translate3d(0,-90%,0) rotate3d(0,0,1,10deg) translate3d(0,30%,0);
}
}@-webkit-keyframes foot-animation {
0% {
-webkit-transform:translateX(-49%) rotateZ(-10deg);
transform:translateX(-49%) rotateZ(-10deg);
}
15% {
-webkit-transform:translateX(-49%) rotateZ(5deg);
transform:translateX(-49%) rotateZ(5deg);
}
40% {
-webkit-transform:translateX(-49%) rotateZ(0deg);
transform:translateX(-49%) rotateZ(0deg);
}
50% {
-webkit-transform:translateX(-49%) rotateZ(15deg);
transform:translateX(-49%) rotateZ(15deg);
}
100% {
-webkit-transform:translateX(-49%) rotateZ(-10deg);
transform:translateX(-49%) rotateZ(-10deg);
}
}@keyframes foot-animation {
0% {
-webkit-transform:translateX(-49%) rotateZ(-10deg);
transform:translateX(-49%) rotateZ(-10deg);
}
15% {
-webkit-transform:translateX(-49%) rotateZ(5deg);
transform:translateX(-49%) rotateZ(5deg);
}
40% {
-webkit-transform:translateX(-49%) rotateZ(0deg);
transform:translateX(-49%) rotateZ(0deg);
}
50% {
-webkit-transform:translateX(-49%) rotateZ(15deg);
transform:translateX(-49%) rotateZ(15deg);
}
100% {
-webkit-transform:translateX(-49%) rotateZ(-10deg);
transform:translateX(-49%) rotateZ(-10deg);
}
}@-webkit-keyframes foot-shadow-animation {
0% {
-webkit-transform:translateX(-50%) rotateZ(-8deg);
transform:translateX(-50%) rotateZ(-8deg);
bottom:-20px;
width:50px;
}
25% {
bottom:-30px;
width:40px;
}
50% {
-webkit-transform:translateX(-50%) rotateZ(13deg);
transform:translateX(-50%) rotateZ(13deg);
bottom:-20px;
width:50px;
}
100% {
-webkit-transform:translateX(-50%) rotateZ(-8deg);
transform:translateX(-50%) rotateZ(-8deg);
bottom:-20px;
width:50px;
}
}@keyframes foot-shadow-animation {
0% {
-webkit-transform:translateX(-50%) rotateZ(-8deg);
transform:translateX(-50%) rotateZ(-8deg);
bottom:-20px;
width:50px;
}
25% {
bottom:-30px;
width:40px;
}
50% {
-webkit-transform:translateX(-50%) rotateZ(13deg);
transform:translateX(-50%) rotateZ(13deg);
bottom:-20px;
width:50px;
}
100% {
-webkit-transform:translateX(-50%) rotateZ(-8deg);
transform:translateX(-50%) rotateZ(-8deg);
bottom:-20px;
width:50px;
}
}@-webkit-keyframes eyes-blink {
0% {
height:10px;
}
3% {
height:1px;
}
5% {
height:10px;
}
100% {
height:10px;
}
}@keyframes eyes-blink {
0% {
height:10px;
}
3% {
height:1px;
}
5% {
height:10px;
}
100% {
height:10px;
}
}@-webkit-keyframes ele-movement {
0% {
-webkit-transform:translate3D(-50%,-54%,0);
transform:translate3D(-50%,-54%,0);
}
50% {
-webkit-transform:translate3D(-50%,-57%,0);
transform:translate3D(-50%,-57%,0);
}
100% {
-webkit-transform:translate3D(-50%,-54%,0);
transform:translate3D(-50%,-54%,0);
}
}@keyframes ele-movement {
0% {
-webkit-transform:translate3D(-50%,-54%,0);
transform:translate3D(-50%,-54%,0);
}
50% {
-webkit-transform:translate3D(-50%,-57%,0);
transform:translate3D(-50%,-57%,0);
}
100% {
-webkit-transform:translate3D(-50%,-54%,0);
transform:translate3D(-50%,-54%,0);
}
}@-webkit-keyframes mouth-movement {
0% {
height:160px;
width:28px;
}
50% {
height:150px;
width:30px;
}
100% {
height:160px;
width:28px;
}
}@keyframes mouth-movement {
0% {
height:160px;
width:28px;
}
50% {
height:150px;
width:30px;
}
100% {
height:160px;
width:28px;
}
}@-webkit-keyframes mouth-after-movement {
0% {
width:37px;
}
50% {
width:40px;
}
100% {
width:37px;
}
}@keyframes mouth-after-movement {
0% {
width:37px;
}
50% {
width:40px;
}
100% {
width:37px;
}
}@-webkit-keyframes tail-movement {
0% {
-webkit-transform:translate3d(-3%,69%,0) rotateZ(-20deg);
transform:translate3d(-3%,69%,0) rotateZ(-20deg);
}
50% {
-webkit-transform:translate3d(-5%,65%,0) rotateZ(-18deg);
transform:translate3d(-5%,65%,0) rotateZ(-18deg);
}
100% {
-webkit-transform:translate3d(-3%,69%,0) rotateZ(-20deg);
transform:translate3d(-3%,69%,0) rotateZ(-20deg);
}
}@keyframes tail-movement {
0% {
-webkit-transform:translate3d(-3%,69%,0) rotateZ(-20deg);
transform:translate3d(-3%,69%,0) rotateZ(-20deg);
}
50% {
-webkit-transform:translate3d(-5%,65%,0) rotateZ(-18deg);
transform:translate3d(-5%,65%,0) rotateZ(-18deg);
}
100% {
-webkit-transform:translate3d(-3%,69%,0) rotateZ(-20deg);
transform:translate3d(-3%,69%,0) rotateZ(-20deg);
}
}@-webkit-keyframes head-movement {
0% {
-webkit-transform:translate3d(80%,-22%,0) rotateZ(3deg);
transform:translate3d(80%,-22%,0) rotateZ(3deg);
}
25% {
-webkit-transform:translate3d(80%,-22.5%,0) rotateZ(0deg);
transform:translate3d(80%,-22.5%,0) rotateZ(0deg);
}
50% {
-webkit-transform:translate3d(80%,-23%,0) rotateZ(-3deg);
transform:translate3d(80%,-23%,0) rotateZ(-3deg);
}
75% {
-webkit-transform:translate3d(80%,-22.5%,0) rotateZ(0deg);
transform:translate3d(80%,-22.5%,0) rotateZ(0deg);
}
100% {
-webkit-transform:translate3d(80%,-22%,0) rotateZ(3deg);
transform:translate3d(80%,-22%,0) rotateZ(3deg);
}
}@keyframes head-movement {
0% {
-webkit-transform:translate3d(80%,-22%,0) rotateZ(3deg);
transform:translate3d(80%,-22%,0) rotateZ(3deg);
}
25% {
-webkit-transform:translate3d(80%,-22.5%,0) rotateZ(0deg);
transform:translate3d(80%,-22.5%,0) rotateZ(0deg);
}
50% {
-webkit-transform:translate3d(80%,-23%,0) rotateZ(-3deg);
transform:translate3d(80%,-23%,0) rotateZ(-3deg);
}
75% {
-webkit-transform:translate3d(80%,-22.5%,0) rotateZ(0deg);
transform:translate3d(80%,-22.5%,0) rotateZ(0deg);
}
100% {
-webkit-transform:translate3d(80%,-22%,0) rotateZ(3deg);
transform:translate3d(80%,-22%,0) rotateZ(3deg);
}
}@-webkit-keyframes body-movement {
0% {
height:160px;
margin-top:5px;
}
50% {
height:162.5px;
margin-top:2.5px;
}
100% {
height:160px;
margin-top:5px;
}
}@keyframes body-movement {
0% {
height:160px;
margin-top:5px;
}
50% {
height:162.5px;
margin-top:2.5px;
}
100% {
height:160px;
margin-top:5px;
}
}@-webkit-keyframes ear-movement {
0% {
height:115px;
}
50% {
height:110px;
}
100% {
height:115px;
}
}@keyframes ear-movement {
0% {
height:115px;
}
50% {
height:110px;
}
100% {
height:115px;
}
}@-webkit-keyframes eyebrows-movement {
0% {
height:18px;
}
50% {
height:20px;
}
100% {
height:18px;
}
}@keyframes eyebrows-movement {
0% {
height:18px;
}
50% {
height:20px;
}
100% {
height:18px;
}
}纯html加css代码写出的大象动画。应用简单方便