css实现可交互可爱卡通猫咪动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现可交互可爱卡通猫咪动画效果代码

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

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">

    <style>
        .cat {
	width:500px;
	margin:0 auto;
	position:relative;
	cursor:pointer;
}
.head_content {
	position:absolute;
	top:100px;
}
.ear_left {
	width:100px;
	height:150px;
	background-color:#FCEDBC;
	border-radius:50% / 10%;
	position:absolute;
	top:22px;
	left:16px;
	transform:rotate(-20deg);
}
.ear_right {
	width:100px;
	height:150px;
	background-color:#FCEDBC;
	border-radius:50% / 10%;
	position:absolute;
	top:22px;
	left:227px;
	transform:rotate(20deg);
}
.head {
	width:345px;
	height:270px;
	background-color:#FFF5D7;
	-webkit-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;
	border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
	position:absolute;
	top:0;
}
.brow_left {
	width:44px;
	height:20px;
	border:1px solid transparent;
	border-top:2px solid #000;
	border-radius:50%/35%;
	position:absolute;
	top:49px;
	left:60px;
	transform:rotate(-37deg);
}
.brow_right {
	width:44px;
	height:20px;
	border:1px solid transparent;
	border-top:2px solid #000;
	border-radius:50%/35%;
	position:absolute;
	top:49px;
	left:240px;
	transform:rotate(37deg);
}
.eye_left {
	width:70px;
	height:70px;
	background:#fff;
	border:1px solid #000;
	border-radius:50%;
	position:absolute;
	top:67px;
	left:70px;
}
.eye_right {
	width:70px;
	height:70px;
	background:#fff;
	border:1px solid #000;
	border-radius:50%;
	position:absolute;
	top:67px;
	left:205px;
}
.pupil {
	width:38px;
	height:38px;
	background:#000;
	border-radius:50%;
	position:absolute;
	top:7px;
	left:30px;
}
.beard_left1 {
	width:95px;
	border-top:1px solid #000;
	position:absolute;
	top:158px;
	left:-50px;
	transform:rotate(10deg);
}
.beard_left2 {
	width:95px;
	border-top:1px solid #000;
	position:absolute;
	top:187px;
	left:-60px;
	transform:rotate(-7deg);
}
.beard_left3 {
	width:95px;
	border-top:1px solid #000;
	position:absolute;
	top:208px;
	left:-50px;
	transform:rotate(-16deg);
}
.beard_right1 {
	width:95px;
	border-top:1px solid #000;
	position:absolute;
	top:158px;
	left:300px;
	transform:rotate(-10deg);
}
.beard_right2 {
	width:95px;
	border-top:1px solid #000;
	position:absolute;
	top:187px;
	left:310px;
	transform:rotate(7deg);
}
.beard_right3 {
	width:95px;
	border-top:1px solid #000;
	position:absolute;
	top:208px;
	left:300px;
	transform:rotate(16deg);
}
.nose {
	width:20px;
	height:10px;
	background-color:#000;
	border-radius:50%/40%;
	position:absolute;
	top:142px;
	left:161px;
}
.mouse {
	position:absolute;
	top:152px;
	left:171px;
}
.mouse_top {
	height:10px;
	border-left:1px solid #000;
	position:absolute;
	top:0;
	left:0;
}
.mouse_left {
	width:100px;
	height:100px;
	border:1px solid transparent;
	border-bottom:1px solid #000;
	border-radius:50%;
	position:absolute;
	top:-78px;
	left:-86px;
}
.mouse_right {
	width:100px;
	height:100px;
	border:1px solid transparent;
	border-bottom:1px solid #000;
	border-radius:50%;
	position:absolute;
	top:-78px;
	left:-14px;
}
.mouse_bottom {
	width:20px;
	height:20px;
	border:1px solid transparent;
	border-bottom:1px solid #000;
	border-right:1px solid #000;
	position:absolute;
	top:8px;
	left:-9px;
	transform:rotate(45deg);
}
.mouse_bottom_show {
	width:100px;
	height:100px;
	border:1px solid transparent;
	border-bottom:1px solid #000;
	border-radius:50%;
	position:absolute;
	top:-63px;
	left:-49px;
	display:none;
}
.miao {
	position:absolute;
	top:-5px;
	left:52px;
	font-size:20px;
	opacity:0;
	color:#FD7055;
}
@keyframes miaoAnim {
	0% {
	opacity:0;
	top:-5px;
	left:52px;
}
30% {
	opacity:1;
	top:-20px;
	left:72px;
	font-size:23px;
}
65% {
	opacity:0.5;
	top:-35px;
	left:92px;
	font-size:26px;
}
100% {
	opacity:0;
	top:-50px;
	left:112px;
	font-size:30px;
}
}.mouse:hover .mouse_bottom {
	display:none;
}
.mouse:hover .mouse_bottom_show {
	display:block;
}
.mouse:hover .miao {
	animation:miaoAnim 1.5s linear;
}
.body_content {
	position:absolute;
	top:305px;
	left:101px;
}
.body {
	width:140px;
	height:165px;
	background:#FCEDBC;
	border:1px solid #000;
	border-radius:50%;
	position:absolute;
	top:0;
	left:0;
	z-index:-10;
}
.arm_left {
	width:20px;
	height:80px;
	background:#FAE8AD;
	border:1px solid #000;
	border-radius:50% / 40%;
	position:absolute;
	top:30px;
	left:10px;
	transform:rotate(50deg);
	z-index:-20;
}
.arm_right {
	width:20px;
	height:80px;
	background:#FAE8AD;
	border:1px solid #000;
	border-radius:50% / 40%;
	position:absolute;
	top:30px;
	left:110px;
	transform:rotate(-50deg);
	z-index:-20;
}
.leg_left {
	width:30px;
	height:93px;
	background:#FAE8AD;
	border:1px solid #000;
	border-radius:50% / 40%;
	position:absolute;
	top:88px;
	left:14px;
	transform:rotate(-20deg);
	z-index:-20;
}
.leg_right {
	width:30px;
	height:93px;
	background:#FAE8AD;
	border:1px solid #000;
	border-radius:50% / 40%;
	position:absolute;
	top:88px;
	left:96px;
	transform:rotate(20deg);
	z-index:-20;
}
.tail {
	position:absolute;
	top:86px;
	left:52px;
	z-index:-30;
	animation:tailanim 1.5s infinite;
}
.tail1 {
	width:236px;
	height:100px;
	border:1px solid transparent;
	border-top:1px solid #000;
	border-radius:50%;
	position:absolute;
	top:0;
	left:0;
	transform:rotate(-25deg);
}
.tail2 {
	width:61px;
	height:41px;
	border:1px solid transparent;
	border-bottom:1px solid #000;
	border-right:1px solid #000;
	border-radius:50%;
.........完整代码请登录后点击上方下载按钮下载查看