css布局实现可爱小老虎吃肉效果代码-html代码-BFW代码库

css布局实现可爱小老虎吃肉效果代码

代码语言：html

代码描述：css布局实现可爱小老虎吃肉效果代码

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

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

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

    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    * {
	padding:0;
	margin:0;
}
html,body,.c {
	font-size:10%;
	font-size:1.0rem;
	width:100%;
	height:100%;
}
.c {
	background-color:var(--body-bg);
	display:flex;
	align-items:center;
	justify-content:center;
}
.tiger {
	background-color:var(--tiger-bg);
	width:100vw;
	height:100vw;
	position:relative;
}
.tiger .head {
	width:85%;
	height:85%;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}
.tiger .head .ears {
	width:100%;
	height:40%;
}
.tiger .head .ears span {
	background-color:var(--tiger-color);
	width:20%;
	height:20%;
	border:var(--tiger-border);
	display:block;
	position:absolute;
	top:10%;
	border-radius:50%;
}
.tiger .head .ears span:first-child {
	left:0;
}
.tiger .head .ears span:last-child {
	right:0;
}
.tiger .head .face {
	background-color:var(--tiger-color);
	width:85%;
	height:75%;
	border:var(--tiger-border);
	position:absolute;
	bottom:0;
	left:50%;
	border-radius:60% 60% 75% 75%;
	transform:translateX(-50%);
}
.tiger .head .face span {
	background-color:var(--border-color);
	width:8%;
	height:35%;
	display:block;
	position:absolute;
	top:0;
	border-radius:0 0 50% 50% / 0 0 100% 100%;
}
.tiger .head .face span:nth-child(1) {
	left:33.3333%;
	transform:translateX(-50%);
}
.tiger .head .face span:nth-child(2) {
	left:50%;
	transform:translateX(-50%);
}
.tiger .head .face span:nth-child(3) {
	left:66.6667%;
	transform:translateX(-50%);
}
.tiger .head .eyes {
	width:100%;
	height:10%;
	position:absolute;
	top:50%;
}
.tiger .head .eyes span {
	background-color:var(--border-color);
	width:10%;
	height:100%;
	display:block;
	border-radius:50%;
	position:absolute;
	top:0;
}
.tiger .head .eyes span:first-child {
	left:25%;
}
.tiger .head .eyes span:last-child {
	right:25%;
}
.tiger .nose {
	background-color:var(--border-color);
	width:10%;
	height:7%;
	display:block;
	border-radius:50%;
	position:absolute;
	top:53%;
	left:37.5%;
	z-index:2;
	border-radius:50% 50% 40% 40% / 50% 50% 80% 80%;
	animation:nose 0.75s ease-in-out infinite;
}
.tiger .mouth {
	width:100%;
	height:6%;
	position:absolute;
	top:61%;
	z-index:2;
	animation:chew 0.75s ease-in-out infinite;
}
.tiger .mouth:before,.tiger .mouth:after {
	content:'';
	background-color:var(--tiger-color);
	width:10%;
	height:80%;
	border:var(--tiger-border);
	border-top:none;
	display:block;
	position:absolute;
	bottom:0;
	border-radius:0 0 50% 50% / 0 0 100% 100%;
}
.tiger .mouth:before {
	left:28%;
}
.tiger .mouth:after {
	left:41%;
}
.tiger .body {
	background-color:var(--tiger-color);
	width:80%;
	height:40%;
	border:var(--tiger-border);
	position:absolute;
	bottom:0;
	right:0;
	border-radius:40% 40% 50% 50% / 80% 80% 50% 50%;
}
.tiger .body:before {
	content:'';
	background-color:var(--tiger-color-2);
	width:80%;
	he.........完整代码请登录后点击上方下载按钮下载查看