Html
    Css
    Js

    
                        
body {
	margin:0;
	height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	background-color:mediumturquoise;
}
.panda {
	width:21em;
	height:16em;
	background-color:white;
	background-image:radial-gradient(ellipse at 50% 60%,#333 1.2em,transparent 1.2em),radial-gradient(ellipse at 50% 80%,#555 0.6em,transparent 0.6em);
	border:0.5em solid #333;
	border-top-left-radius:11em;
	border-top-right-radius:11em;
	border-bottom-left-radius:11em 6em;
	border-bottom-right-radius:11em 6em;
	border-bottom-width:1em;
	box-shadow:inset 1em -1em 0 #eee;
	position:relative;
}
.panda::before,.panda::after {
	content:'';
	position:absolute;
	width:7em;
	height:4em;
}
.panda::before {
	content:'';
	position:absolute;
	width:7em;
	height:4em;
	left:2.9em;
	top:5.5em;
	background-color:#333;
	background-image:radial-gradient(circle at 5.1em 2em,white 0.3em,transparent 0.3em),radial-gradient(circle at 4.6em 2em,#333 0.7em,transparent 0.7em),radial-gradient(circle at 4.5em 2em,white 1em,transparent 1em);
	border-radius:50% 50% 45% 42%;
	transform:rotate(-45deg);
	box-shadow:1em -7.2em 0 -0.4em #333;
	animation:before-animate 1s ease-in-out infinite alternate;
}
.panda::after {
	content:'';
	position:absolute;
	width:7em;
	height:4em;
	left:11.1em;
	top:5.5em;
	background-color:#333;
	background-image:radial-gradient(circle at 2.4em 1.5em,white 0.3em,transparent 0.3em),radial-gradient(circle at 2.4em 2em,#333 0.7em,transparent 0.7em),radial-gradient(circle at 2.5em 2em,white 1em,transparent 1em);
	border-radius:50% 50% 42% 45%;
	transform:rotate(45deg);
	box-shadow:-1em -7.2em 0 -0.4em #333;
	animation:after-animate 1s ease-in-out infinite alternate -1s;
}
@keyframes before-animate {
	to {
	transform:rotate(-40deg);
	background-image:radial-gradient(circle at 4.9em 1.8em,white 0.3em,transparent 0.3em),radial-gradient(circle at 4.4em 1.8em,#333 0.7em,transparent 0.7em),radial-gradient(circle at 4.5em 2em,white 1em,transparent 1em);
}
}@keyframes after-animate {
	to {
	transform:rotate(40deg);
	background-image:radial-gradient(circle at 2.6em 1.3em,white 0.3em,transparent 0.3em),radial-gradient(circle at 2.6em 1.8em,#333 0.7em,transparent 0.7em),radial-gradient(circle at 2.5em 2em,white 1em,transparent 1em);
}
}

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

css3熊猫动画

0