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

代码语言:html

所属分类:动画

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

代码标签: 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