css实现可爱小老虎图像效果代码-html代码-BFW代码库

css实现可爱小老虎图像效果代码

代码语言：html

代码描述：css实现可爱小老虎图像效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
*{
	box-sizing:border-box;
	padding:0;
	margin:0;
}
body{
	background:#dfd2fd;
}
.container{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	border-radius:100%;
	background:rgba(255,255,255,0.8);
	width:350px;
	height:350px;
	overflow:hidden;
}
.tiger{
	margin-top:65px;
}
.head{
	position:relative;
	z-index:10;
	width:150px;
	height:175px;
	margin:auto;
}
.ears{
	position:absolute;
	top:0;
	width:100%;
}
.ears:before,
.ears:after{
	position:absolute;
	content:'';
	width:20px;
	height:25px;
	border:7px solid orange;
	background:#AD734B;
	box-shadow:inset 2px 2px rgba(0,0,0,0.25);
}
.ears:before{
	left:0;
	border-radius:50% 50% 25% 50%;
}
.ears:after{
	right:0;
	border-radius:50% 50% 50% 25%;
}
.face{
	position:relative;;
	width:100%;
	height:100%;
	border-radius:110px 110px 125px 125px;
	background:orange;
}
.face:after{
	position:absolute;
	bottom:0;
	content:'';
	width:100%;
	height:100%;
	border-bottom:40px solid rgba(255, 255, 255, 0.75);
	border-radius:110px 110px 125px 125px;
}
.line{
	position:absolute;
	top:7.5%;
	left:0;
	right:0;
	width:35%;
	height:8px;
	margin:auto;
	border-radius:100%;
	background:#333;
}
.line + .line{
	top:17.5%;
	width:47.5%;
}
.stripe{
	position:absolute;
	border-bottom:8px solid transparent;
	border-top:8px solid transparent;
	border-left:18px solid #333;
	left:0;
	right:0;
}
.stripe:nth-of-type(odd){
	top:35%;
}
.stripe:nth-of-type(even){
	top:50%;
}
.mirrored{
	transform:scaleX(-1);
}
.eyes{
	position:absolute;
	top:37.5%;
	width:100%;
}
.eyes:before,
.eyes:after{
	position:absolute;
	content:'';
	width:13px;
	height:15px;
	border-radius:50%;
	background:radial-gradient(circle at 6px 6px, #FFF 10%, #000 15%);
}
.eyes:before{
	left:30%;
}
.eyes:after{
	right:30%;
}
.nose{
	position:absolute;
	top:73%;
	left:0;
	right:0;
	z-index:5;
	margin:auto;
	width:25px;
	height:20px;
	background.........完整代码请登录后点击上方下载按钮下载查看