css实现仓鼠从天而降穿过云层自由落体下坠动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现仓鼠从天而降穿过云层自由落体下坠动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    :root {
	--cat-colour:#ddad6a;
	--cat-colour-dark:#c19557;
	--nose-colour:#dd746a;
	--stroke-width:7px;
	--stroke-colour:#1f1244;
	--sky:#48a5e2;
}
body {
	background:var(--sky);
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	height:100vh;
	overflow:hidden;
}
.cat-container {
	margin-top:40px;
	animation-name:falling;
	animation-duration:2.2s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
}
.cat {
	position:relative;
}
.body {
	width:225px;
	height:250px;
	background:var(--cat-colour);
	border-radius:199px 147px 127px 154px;
	border:var(--stroke-width) solid var(--stroke-colour);
	position:relative;
}
.tummy {
	width:100px;
	height:115px;
	background:white;
	border-radius:50%;
	position:absolute;
	right:30px;
	bottom:30px;
}
.eye-mark {
	/*  use a clipping mask?  width:100px;
	height:100px;
	border-radius:50%;
	background:white;
	position:absolute;
	right:0;
	*/
}
.ear-back {
	width:50px;
	height:65px;
	border-radius:50%;
	background:white;
	border:var(--stroke-width) solid var(--stroke-colour);
	position:absolute;
	left:170px;
	top:5px;
	transform:rotate(30deg);
	animation-name:ears;
	animation-duration:0.1s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
}
.ear-front {
	width:55px;
	height:70px;
	background:var(--stroke-colour);
	border-radius:50%;
	position:absolute;
	top:0;
	left:20px;
	transform:rotate(-30deg);
	animation-name:ears;
	animation-duration:0.1s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
}
.ear-inner {
	width:39px;
	height:65px;
	background:var(--cat-colour);
	border-radius:50%;
	position:relative;
	left:11px;
	top:12px;
}
.eye {
	width:20px;
	height:20px;
	background:var(--stroke-colour);
	border-radius:50%;
	position:absolute;
}
.eye-left {
	left:90px;
	top:45px;
}
.eye-right {
	right:30px;
	top:45px;
}
.nose {
	width:25px;
	height:10px;
	border-radius:50%;
	background:var(--nose-colour);
	border:solid 1px var(--stroke-colour);
	position:absolute;
	left:131px;
	top:49px;
}
.mouth {
	position:absolute;
	width:20px;
	height:25px;
	background:var(--cat-colour);
	border-radius:50%;
	border:solid 2px var(--stroke-colour);
}
.mouth-right {
	left:142px;
	top:53px;
}
.mouth-left {
	left:123px;
	top:53px;
}
.mouth:before {
	content:'';
	display:block;
	width:28px;
	height:30px;
	background:var(--cat-colour);
	position:relative;
	top:-20px;
	left:-5px;
}
.leg {
	background:var(--stroke-colour);
	width:50px;
	height:105px;
	border-radius:50%;
	position:absolute;
	bottom:-30px;
	left:-10px;
	transform:rotate(230deg);
}
.leg-inner {
	position:absolute;
	width:43px;
	height:100px;
	background:var(--cat-colour);
	border-radius:50%;
	right:4px;
	bottom:-4px;
}
.leg-front {
	top:100px;
	left:11px;
	transform-origin:bottom center;
	animation-name:leg-back;
	animation-duration:.7s;
	animation-iteration-count:infinite;
	animation-delay:0.1s;
	animation-direction:alternate;
}
.leg-back {
	left:190px;
	transform:rotate(120deg);
	animation-name:leg-back;
	animation-duration:.2s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
}
.leg-back .leg-inner {
	background:var(--cat-colour-dark);
}
.paw {
	background:var(--stroke-colour);
	width:45px;
	height:80px;
	border-radius:50%;
	position:absolute;
	top:80px;
	left:-20px;
	transform:rotate(45deg);
}
.paw-front {
	top:118px;
	left:-5px;
	transform-origin:top center;
	animation-name:paw-front;
	animation-duration:.7s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
}
.paw-inner {
	background:var(--cat-colour);
	width:38px;
	height:75px;
	border-radius:50%;
	position:relative;
	top:-4px;
	left:3px;
}
.paw-back {
	left:215px;
	transform:rotate(-35deg);
	animation-name:paw-front;
	animation-duration:.3s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	animation-delay:0.5s;
}
.paw-back .paw-inner {
	background:var(--cat-colour-dark);
}
.speed-container {
	display:flex;
	justify-content:space-around;
	width:75px;
}
.speed {
	width:5px;
	height:130px;
	background:white;
	border-radius:5px;
	z-index:100;
	animation-name:speed;
	animation-duration:0.1s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
}
.speed-left {
	margin-top:3px;
}
@keyframes speed {
	0% {
	margin-top:0px;
}
50%% {
	margin-top:1px;
}
0% {
	margin-top:0px;
}
}@keyframes falling {
	0% {
	transform:rotate(-25deg);
}
100% {
	transform:rotate(-17deg);
}
}@keyframes ears {
	0% {
	transform:rotate(-35deg);
}
100% {
	transform:rotate(-27deg);
}
}@keyframes leg-back {
	0% {
	transform:rotate(115deg);
}
100% {
	transform:rotate.........完整代码请登录后点击上方下载按钮下载查看