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

代码语言:html

所属分类:布局界面

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

代码标签: 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%;
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0