Html
    Css
    Js

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

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css大象动画

纯html加css代码写出的大象动画。应用简单方便

0