css实现大眼睛可爱小老虎卖萌动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现大眼睛可爱小老虎卖萌动画效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
    body {
	background:black;
}
.container {
	position:relative;
	width:800px;
	height:600px;
	background:#214760;
	margin:0px auto;
}
.tigre {
	position:absolute;
	margin:271px 350px
}
.face {
	position:absolute;
	width:251px;
	height:172px;
	border-radius:90px;
	background:#D8D3D6;
	margin:-90px -90px;
}
.face::before {
	content:"";
	position:absolute;
	width:152px;
	height:152px;
	border-radius:700px 700px 5000px 700px;
	background:#D8D3D6;
	-webkit-transform:rotate(225deg);
	transform:rotate(225deg);
	margin:30px 55px
}
.face3 {
	position:absolute;
	width:231px;
	height:182px;
	border-radius:50%  50%  50%  50%  / 60%   60%   40%  40%;
	background:#f47b5d;
	margin:-102px -80px;
}
.face3::before {
	content:"";
	position:absolute;
	width:90px;
	height:90px;
	border-radius:700px 700px 5000px 700px;
	background:#f47b5d;
	-webkit-transform:rotate(225deg);
	transform:rotate(225deg);
	margin:95px 73px
}
.face5 {
	position:absolute;
	width:152px;
	height:132px;
	border-radius:100%;
	background:#eda65e;
	margin:40px 40px;
}
.orejas,.orejas3 {
	position:absolute;
	width:60px;
	height:65px;
	border-radius:100%;
	background:#969495;
	border:12px solid #B94535;
}
.orejas {
	margin:-121px -83px
}
.orejas3 {
	margin:-121px 63px
}
.ojos,.ojos3 {
	position:absolute;
	width:90px;
	height:80px;
	border-radius:50%  50%  50%  50%  / 60%   60%   40%  40%;
	background:#937B54;
	border-top:7px solid black;
	-webkit-animation:cerrar 3s alternate infinite;
	animation:cerrar 3s alternate infinite;
}
.ojos {
	margin:70px 12px;
	border-left:7px solid black;
}
.ojos3 {
	margin:70px 121px;
	border-right:7px solid black;
}
.ojos::before,.ojos3::before {
	content:"";
	position:absolute;
	width:80px;
	height:60px;
	border-radius:50%  50%  50%  50%  / 60%   60%   40%  40%;
	background:#C99621;
}
.ojos::before {
	margin:17px 3px
}
.ojos3::before {
	margin:17px 8px
}
.iris,.iris7 {
	position:absolute;
	width:63px;
	height:77px;
	border-radius:50%  50%  50%  50%  / 60%   60%   40%  40%;
	background:black;
	margin:0 14px
}
.iris {
	-webkit-transform:rotate(-12deg);
	transform:rotate(-12deg)
}
.iris7 {
	-webkit-transform:rotate(12deg);
	transform:rotate(12deg)
}
.iris::before,.iris7::before {
	content:"";
	position:absolute;
	width:35px;
	height:50px;
	border-radius:100%;
	background:white;
}
.iris::before {
	-webkit-transform:rotate(33deg);
	transform:rotate(33deg);
	margin:0px 5px
}
.iris7::before {
	-webkit-transform:rotate(-33deg);
	transform:rotate(-33deg);
	margin:0px 23px
}
.iris3,.iris9 {
	position:absolute;
	width:14px;
	height:12px;
	border-radius:100%;
	background:white;
	margin:62px 30px
}
.iris3::before,.iris9::before {
	content:"";
	position:absolute;
	width:80px;
	height:35px;
	border-radius:50%  50%  50%  50%  / 60%   60%   40%  40%;
	opacity:.3;
	background:#937B54;
}
.iris3::before {
	margin:-60px -30px;
	-webkit-transform:rotate(33deg);
	transform:rotate(33deg)
}
.iris9::before {
	margin:-60px -49px;
	-webkit-transform:rotate(-33deg);
	transform:rotate(-33deg)
}
.boca {
	position:absolute;
	width:21px;
	height:21px;
	border-radius:100%;
	background:#eaeaea;
	margin:152px 95px;
	-webkit-animation:go7 2.1s alternate infinite;
	animation:go7 2.1s alternate infinite;
}
.boca::before {
	content:"";
	position:absolute;
	width:21px;
	height:21px;
	border-radius:100%;
	background:#eaeaea;
	margin:0px 21px
}
.boca3 {
	position:absolute;
	width:18px;
	height:16px;
	border-radius:50%  50%  50%  50%  / 60%   60%   40%  40%;
	background:#8c4b59;
	margin:145px 107px;
}
.boca7 {
	position:absolute;
	width:21px;
	height:12px;
	border-radius:0 0 21px 21px;
	background:#8c4b59;
	border:1px solid black;
	margin:162px 105px;
}
.cejas {
	position:absolute;
	width:25px;
	height:12px;
	border-radius:100%;
	background:black;
	margin:50px 35px;
	-webkit-transform:rotate(-21deg);
	transform:rotate(-21deg)
}
.cejas::before {
	content:"";
	position:absolute;
	width:25px;
	height:12px;
	border-radius:100%;
	background:black;
	margin:50px 125px;
	-webkit-transform:rotate(42deg);
	transform:rotate(42deg)
}
.cejas3,.cejas7 {
	position:absolute;
	width:21px;
	height:21px;
	border-radius:100%;
}
.cejas3 {
	border-bottom:5px solid black;
	margin:63px 12px;
}
.cejas7 {
	border-bottom:5px solid black;
	margin:63px 195px;
}
.cejas3::before,.cejas7::before {
	content:"";
	position:absolute;
	width:21px;
	height:21px;
	border-radius:100%;
	border-bottom:5px solid black;
}
.cejas3::before {
	margin:9px -3px;
	-webkit-transform:rotate(-30deg);
	transform:rotate(-30deg)
}
.cejas7::before {
	margin:9px 0px;
	-webkit-transform:rotate(21deg);
	transform:rotate(21deg)
}
.bigotes,.bigotes3 {
	position:absolute;
	width:35px;
	height:1px;
	background:black;
	-webkit-animation:go7 2.1s alternate infinite;
	animation:go7 2.1s alternate infinite;
}
.bigotes {
	margin:162px 73px;
}
.bigotes3 {
	margin:162px 123px;
}
.bigotes::before,.bigotes3::before {
	content:"";
	position:absolute;
	width:35px;
	height:1px;
	background:black;
}
.bigotes::before {
	margin:7px 3px;
	-webkit-transform:rotate(-21deg);
	transform:rotate(-21deg)
}
.bigotes3::before {
	margin:7px -3px;
	-webkit-transform:rotate(21deg);
	transform:rotate(21deg)
}
.body5 {
	position:absolute;
	width:95px;
	height:95px;
	border-radius:100%;
	background:#f4b09f;
	margin:80px -21px
}
.body7 {
	position:absolute;
	width:60px;
	height:102px;
	border-radius:100%;
	background:#B94535;
	margin:77px -45px
}
.body7::before {
	content:"";
	position:absolute;
	width:65px;
	height:102px;
	border-radius:100%;
	background:#B94535;
	margin:0px 105px
}
.legs,.legs3 {
	position:absolute;
	width:90px;
	height:150px;
	border-top:40px solid #f47b5d;
	border-left:40px solid transparent;
	border-right:40px solid transparent;
	border-radius:100px / 100px;
}
.legs {
	-webkit-transform:rotate(85deg);
	transform:rotate(85deg);
	margin:30px -75px
}
.legs3 {
	-webkit-transform:rotate(-85deg);
	transform:rotate(-85deg);
	margin:30px -12px;
}
.legs::before,.legs3::before {
	content:"";
	position:absolute;
	width:33px;
	height:50px;
	border-radius:100%;
	background:#f47b5d;
}
.legs::before {
	margin:-21px 77px
}
.legs3::before {
	margin:-21px -19px
}
.legs7::before {
	content:"";
	position:absolute;
	width:33px;
	height:21px;
	border-radius:0 0 50px 50px;
	background:#cc9666;
	margin:.........完整代码请登录后点击上方下载按钮下载查看