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