div+css实现上下滑动x光透视人体骨骼效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：div+css实现上下滑动x光透视人体骨骼效果代码，鼠标悬浮移动区域。

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


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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
:root {
	--hair : #303030;
	--mouth: #f0a282;
	--skin : #ffc49c;
	--scan : #2a393c;
	--shine: #00ff97;
	--shine: #00ffea;
	--fit: #fff;
	--spd: 0.25s;
}		

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(ellipse at 50% 50%,#fff 35vmin, var(--shine));
	box-shadow: 0 0 12vmin 5vmin #000 inset;
}

body:after {
	content: "";
	width: 18vmin;
	position: absolute;
	height: 9vmin;
	bottom: 9.5vmin; 
	animation: block-btn 4s linear 0s 1;
	animation-fill-mode: forwards;
}

@keyframes block-btn {
	 0%,  50% { bottom: 9.5vmin; }
	51%, 100% { bottom: -10vmin; }
} 

.content {
	width: 34vmin;
	height: 60vmin;
	background-size: cover;
	position: relative;
	margin-top: -10vmin;
}

.x-ray {
	height: 5%;
	box-sizing: border-box;
	position: relative; 
	z-index: 4;
	cursor: n-resize;
}

.human-body, .skeleton {	
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 1;
	display: flex;
	justify-content: center;
}	




/*** HUMAN BODY ***/

.human-body div {
	position: absolute;
}

.hair {
	width: 14.25vmin;
	height: 14vmin;
	top: 1vmin;
	background: var(--hair);
	border-radius: 4vmin;
	z-index: 1;
	clip-path: polygon(3% 100%, 4% 94%, 2% 88%, 1% 80%, 1% 74%, 1% 60%, 3% 46%, 5% 39%, 8% 32%, 12% 27%, 17% 21%, 23% 15%, 31% 11%, 39% 9%, 45% 6%, 48% 5%, 51% 4%, 49% 13%, 52% 12%, 57% 11%, 64% 9%, 71% 8%, 76% 8%, 81% 10%, 86% 10%, 91% 12%, 90% 16%, 88% 21%, 86% 23%, 90% 23%, 93% 23%, 97% 22%, 98% 22%, 98% 28%, 98% 33%, 97% 36%, 97% 38%, 97% 43%, 97% 47%, 98% 49%, 98% 53%, 98% 60%, 99% 65%, 99% 70%, 99% 75%, 98% 80%, 96% 86%, 93% 91%, 92% 95%, 92% 100%, 89% 91%, 90% 85%, 89% 79%, 89% 74%, 89% 68%, 88% 62%, 85% 55%, 80% 57%, 76% 58%, 69% 59%, 63% 59%, 58% 59%, 51% 57%, 45% 53%, 40% 52%, 42% 60%, 42% 63%, 42% 62%, 42% 62%, 39% 62%, 35% 61%, 31% 60%, 27% 58%, 23% 56%, 19% 53%, 16% 50%, 14% 56%, 13% 59%, 12% 62%, 11% 65%, 10% 72%, 10% 82%, 11% 93%);
}

.ears {
	width: 12.5vmin;
	height: 5vmin;
	top: 12.5vmin;
	left: 8.5vmin;
	z-index: -1;
}

.ears:before, .ears:after {
	content: "";
	position: absolute;
	background: radial-gradient(var(--mouth) 0 1.5vmin, var(--skin) calc(1.5vmin + 1px) 100%);
	width: 4.5vmin;
	height: 3.5vmin;
	top: 0.15vmin;
	left: 0;
	border-radius: 100%;
	transform: rotate(40deg);
}

.ears:after {
	transform: rotateY(180deg) rotate(40deg);
	right: 0;
	left: 100%;
}

.head {
	width: 13vmin;
	height: 17vmin;
	top: 4.25vmin;
	background: var(--skin);
	border-radius: 50% 50% 50% 50% / 34% 34% 66% 66%;
	z-index: 0;
}

.eyes {
	width: 13vmin;
	height: 5vmin;
	top: 7vmin;
}

.eyes:before, .eyes:after {
	content: "";
	position: absolute;
	width: 1.65vmin;
	height: 2vmin;
	top: 2vmin;
	left: 3vmin;
	border-radius: 100%;
	background: radial-gradient(circle at 40% 35%, #fff 0 0.25vmin, var(--hair) calc(0.25vmin + 1px) 100% );
}

.eyes:after {
	left: 8.75vmin;
}

.eyebrows {
	width: 13vmin;
	height: 2vmin;
	top: 0;
}

.eyebrows span {
	content: "";
	position: absolute;
	width: 2.25vmin;
	height: 1.5vmin;
	top: 0.35vmin;
	left: 2vmin;
	border-radius: 100%;
	border: 0.65vmin solid #fff0;
	border-top-color: var(--hair);
}

.eyebrows span:before, .eyebrows span:after {
	content: "";
	position: absolute;
	background: var(--hair);
	width: 0.65vmin;
	height: 0.65vmin;
	top: -0.2vmin;
	left: -0.3vmin;
	border-radius: 100%;
}

.eyebrows span:after {
	left: 1.95vmin;
}

.eyebrows span + span {
	left: 8vmin;
}

.nose {
	width: 2vmin;
	height: 1.75vmin;
	top: 10.65vmin;
	left: 5.75vmin;
	border-radius: 0.75vmin;
	border: 0.5vmin solid #fff0;
	box-sizing: border-box;
	border-left-color: var(--mouth);
	border-top-color: var(--mouth);
	transform: rotate(-48deg);
}

.mouth {
	width: 5vmin;
	height: 5vmin;
	top: 9.75vmin;
	left: 4vmin;
	border-radius: 100%;
	border: 0.5vmin solid #fff0;
	box-sizing: border-box;
	border-bottom-color: var(--mouth);
}

.mouth:before, .mouth:after {
	content: "";
	position: absolute;
	background: var(--mouth);
	width: 0.45vmin;
	height: 0.45vmin;
	bottom: 0.15vmin;
	left: 0.35vmin;
	border-radius: 100%;
}

.mouth:after {
	left: 3.375vmin;
}

.neck { 
	width: 4vmin;
	height: 3vmin;
	background: var(--skin);
	top: 20vmin;
	margin-left: -0.25vmin;
}

.neck:before {
	content: "";
	position: absolute;
	width: 4vmin;
	height: 2vmin;
	top: -0.5vmin;
	left: 0;
	border-radius: 100%;
	border-bottom: 0.5vmin solid var(--mouth);
	box-sizing: border-box;
}

.torso { 
	width: 10vmin;
	height: 16vmin;
	background: 
		radial-gradient(circle at 50% 80%, var(--mouth) 0 0.3vmin, #fff0 calc(0.3vmin + 1px) 100%), 
		radial-gradient(circle at 80% 38%, var(--mouth) 0 0.35vmin, #fff0 calc(0.35vmin + 1px) 100%), 
		radial-gradient(circle at 22% 38%, v.........完整代码请登录后点击上方下载按钮下载查看