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

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

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