div+css布局绘制一个独角兽效果代码-html代码-BFW代码库

div+css布局绘制一个独角兽效果代码

代码语言：html

代码描述：div+css布局绘制一个独角兽效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
<style>
html {
  height: 100%;
}

body {
	display: grid;
	place-items: center;
	height: 100vh;
	padding: 0;
	margin: 0;
	background-color: hwb(170.217 64% 0%);
	overflow: hidden;
}

.main {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.head {
	height: 15vmin;
	width: 30vmin;
	background: radial-gradient(
		circle at 0% 50%,
		hwb(310.588 80% 0%) 20%,
		hwb(60 98% 0%) 20%
	);
	border-radius: 30%;
}

.head:before {
	display: block;
	content: "";
	height: 20vmin;
	width: 20vmin;
	background-color: hwb(60 98% 0%);
	border-radius: 50%;
	position: relative;
	top: -3vmin;
	left: 15vmin;
	transform: rotate(-10deg);
}

.head:after {
	display: block;
	content: "";
	height: 20vmin;
	width: 15vmin;
	background-color: hwb(60 98% 0%);
	position: relative;
	top: -6vmin;
	left: 17vmin;
	z-index: -999;
	transform: rotate(-5deg);
}

.ear {
	height: 10vmin;
	width: 5vmin;
	background: hwb(60 98% 0%);
	border-radius: 102px 313px 341px 329px / 0px 150px 150px 150px;
	position: relative;
	top: -20vmin;
	left: 27vmin;
	transform: rotate(75deg);
}

.ear:after {
	display: block;
	content: "";
	height: 2vmin;
	width: 3vmin;
	background: hwb(310.588 80% 0%);
	border-radius: 102px 313px 341px 329px / 0px 150px 150px 150px;
	position: relative;
	top: 1vmin;
	left: 0.5vmin;
	transform: rotate(-120deg);
}

.mane1 {
	height: 15vmin;
	width: 30vmin;
	background: linear-gradient(
		0deg,
		hwb(280.941 0% 0%) 10%,
		hwb(141.031 0% 24%) 30%,
		hwb(27.059 0% 0%) 50%
	);
	clip-path: polygon(
		46% 43%,
		66% 37%,
		91% 44%,
		100% 70%,
		100% 100%,
		60% 100%,
		28% 100%,
		19% 56%,
		28% 73%,
		33% 56%
	);
	position: relative;
	top: -39vmin;
	right: 3vmin;
	z-index: -1;
}

.mane2 {
	height: 40vmin;
	width: 60vmin;
	background: linear-gradient(
		90deg,
		hwb(312.941 0% 0%) 20%,
		hwb(35.059 0% 0%) 30%,
		hwb(60.941 0% 0%) 40%
	);
	clip-path: polygon(
		28% 18%,
		37% 28%,
		48% 42%,
		45% 64%,
		36% 82%,
		25% 86%,
		0 85%,
		16% 71%,
		26% 44%,
		11% 9%
.........完整代码请登录后点击上方下载按钮下载查看