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

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

代码语言：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;
	ani.........完整代码请登录后点击上方下载按钮下载查看