身体各部位样式详解——头部 - lancer07/css3Ultraman GitHub Wiki

头部

奥特曼的头

html结构

<header>
  <div class="hair"></div>
  <div class="left_eye"><span></span></div>
  <div class="right_eye"><span></span></div>
  <div class="left_ear"></div>
  <div class="right_ear"></div>
</header>

less样式

header{
		border:7px solid #000;
		border-top:15px solid #000;
		width:200px;
		height:200px;
		border-radius:50% 50% 60% 60%;
		position:absolute;
		background:#fff;
		.hair{
			position:absolute;
			top:-40px;
			left:80px;
			width: 0;
			height: 0;
			border-left: 20px solid transparent;
			border-right: 20px solid transparent;
			border-top: 140px solid #000;
			border-radius:30% 30% 50% 50%;
		}
		.eye(@l,@r,@eye){
			border:5px solid #000;
			width:70px;
			height:70px;
			background:#ffc30a;
			border-radius:@l @r;
			position:absolute;
			span{
				width:10px;
				height:10px;
				display:block;
				background:#000;
				position:absolute;
				left:@eye;
				top:40px;
				border-radius:50%;
			}
		}
		.left_eye{
			.eye(50%,60%,50px);
			top:60px;
			left:10px;
		}
		.right_eye{
			.eye(60%,50%,10px);
			top:60px;
			right:10px;
		}
		.ear(@deg){
			width:20px;
			height:50px;
			border:5px solid #000;
			position:absolute;
			top:70px;
			z-index:-1;
			transform:rotate(@deg);
			background:#fff;
		}
		.left_ear{
			.ear(-7deg);
			left:-20px
		}
		.right_ear{
			.ear(7deg);
			right:-20px
		}
	}
⚠️ **GitHub.com Fallback** ⚠️