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%, var(--mouth) 0 0.35vmin, #fff0 calc(0.35vmin + 1px) 100%), 
                linear-gradient(-88deg, var(--fit) 0 0.35vmin, #fff0 calc(0.35vmin + 1px) 100%), 
                linear-gradient(88deg, var(--fit) 0 0.35vmin, #fff0 calc(0.35vmin + 1px) 100%),  
                linear-gradient(200deg, #fff0 0 1vmin, var(--skin) calc(1vmin + 1px) 2vmin, #fff0 0 100%), 
                linear-gradient(160deg, #fff0 0 1vmin, var(--skin) calc(1vmin + 1px) 2vmin, #fff0 0 100%), 
                linear-gradient(180deg, #fff0 0 2vmin, var(--skin) 0 100%), 
                linear-gradient(90deg, #fff0 0 3vmin, var(--skin) 0 7vmin, #fff0 0 100%), 
                radial-gradient(circle at 77% 36%, var(--skin) 0 5vmin, #fff0 calc(5vmin + 1px) 100%), 
                radial-gradient(circle at 23% 36%, var(--skin) 0 5vmin, #fff0 calc(5vmin + 1px) 100%);
        top: 21.5vmin;
        margin-left: -0.25vmin;
        z-index: 2;
}

.torso:after {
        content: "";
        width: calc(100% - 1vmin);
        height: 1.5vmin;
        background: var(--skin);
        position: absolute;
        bottom: -1.5vmin;
        left: 0.5vmin;
        z-index: -1;
}

.arms {
        width: 28vmin;
        height: 18vmin;
        top: 22.5vmin;
        z-index: 1;
}

.arm {
        background: linear-gradient(0deg, #fff0 0 5vmin, var(--skin) calc(5vmin + 1px) 50%);
        width: 3.4vmin;
        height: 20vmin;
        transform: rotate(19deg);
        left: 4.25vmin;
        top: -1vmin;
        border-radius: 10vmin 0 150% 0;
}

.arm:before {
        content: "";
        width: 2vmin;
        height: 7vmin;
        background: var(--skin);
        position: absolute;
        top: 3vmin;
        left: -0.25vmin;
        border-radius: 100%;
}

.hand {
        width: 5.5vmin;
        height: 6vmin;
        background: var(--skin);
        bottom: 0;
        left: -2.1vmin;
        clip-path: polygon(38% 0%, 33% 5%, 27% 13%, 23% 18%, 13% 26%, 5% 35%, 1% 41%, 2% 44%, 4% 47%, 7% 47%, 16% 44%, 22% 40%, 25% 36%, 26% 36%, 26% 38%, 24% 46%, 21% 60%, 20% 74%, 21% 81%, 23% 85%, 25% 87%, 28% 87%, 30% 84%, 34% 72%, 36% 60%, 37% 58%, 39% 58%, 39% 63%, 38% 72%, 37% 80%, 38% 88%, 40% 92%, 43% 93%, 45% 91%, 48% 88%, 51% 83%, 53% 70%, 53% 62%, 54% 59%, 56% 58%, 57% 60%, 56% 65%, 56% 74%, 56% 82%, 58% 88%, 60% 90%, 63% 92%, 65% 92%, 67% 89%, 70% 84%, 70% 74%, 70% 65%, 70% 61%, 71% 59%, 72% 60%, 74% 62%, 75% 69%, 75% 77%, 76% 81%, 78% 83%, 81% 82%, 83% 80%, 87% 66%, 92% 43%, 95% 23%, 97% 7%, 97% 0%);
        border-radius: 0 1.5vmin 0 0;
        z-index: -1;
}

.arm + .arm {
        transform: rotateY(180deg) rotate(19deg);
        left: 20vmin;
}

.pants {
        width: 10.5vmin;
        height: 6vmin;
        top: 35.5vmin;
        background: var(--hair);
        clip-path: polygon(2% 1%, 0% 92%, 8% 96%, 16% 97%, 21% 98%, 27% 97%, 33% 97%, 45% 94%, 46% 75%, 49% 73%, 51% 75%, 52% 99%, 52% 97%, 56% 97%, 60% 97%, 69% 97%, 90% 96%, 98% 93%, 95% 1%, 75% 4%, 61% 5%, 42% 5%);
        z-index: 3;
}

.legs {
        width: 15vmin;
        height: 21vmin;
        top: 37.5vmin;
        z-index: -1;
        margin-left: -0.2vmin;
}

.leg {
        background: var(--skin);
        width: 4.25vmin;
        height: 19vmin;
        transform: rotate(1deg);
        left: 2.65vmin;
        top: -1vmin;
        border-radius: 1px 1px 30% 40%;
}

.leg:before {
        content: "";
        width: 2vmin;
        height: 10vmin;
        background: var(--skin);
        position: absolute;
        top: 1vmin;
        left: -0.5vmin;
        border-radius: 100%;
}

.leg + .leg {
        transform: rotateY(180deg) rotate(1deg);
        left: 8vmin;
}

.foot {
        background: var(--skin);
        width: 7vmin;
        height: 4vmin;
        top: 18vmin;
        left: -2.75vmin;
        clip-path: polygon(90% 2%, 93% 2%, 98% 56%, 98% 56%, 97% 68%, 97% 68%, 92% 77%, 92% 77%, 77% 84%, 77% 84%, 45% 92%, 45% 92%, 24% 92%,  14% 92%, 8% 87%, 6% 76%, 10% 66%,  15% 57%, 24% 47%, 32% 34%, 48% 12%,  50% 10%, 55% 0%);
        clip-path: polygon(90% 2%, 93% 2%, 98% 56%, 98% 56%, 97% 68%, 97% 68%, 92% 77%, 92% 77%, 77% 84%, 77% 84%, 45% 92%, 45% 92%, 24% 92%,  14% 92%, 8% 85%, 6% 76%, 10% 66%,  15% 58%, 27% 47%, 34% 34%, 48% 12%,  50% 10%, 55% 0%);
        z-index: -1;
}




/*** SKELETON ***/

.skeleton {
        --hair: #0000;  
        --skin: #163238; /*43b9d1*/
        --mouth: #163238;
        --fit: #242424;
        --bone: #fff;
        background: linear-gradient(90deg, #000, #333, #000);
        clip-path: polygon(0 47.5%, 100% 47.5%, 100% 67.5%, 0 67.5%);
        transition: clip-path var(--spd) ease 0s;       
        animation: startup-skeleton 3s ease-in-out 0s 1;
        opacity: 0.965;
}

.skeleton div {
        position: absolute;
}

.cranium {
        background: 
                linear-gradient(180deg, var(--bone) 0 55%, #fff0 0 90%, #fff 0 100%), 
                radial-gradient(circle at 75% 73%, #fff0 0 1.75vmin, var(--bone) calc(1.75vmin + 1px) 4vmin, #fff0 0 100%), 
                radial-gradient(circle at 25% 73%, #fff0 0 1.75vmin, var(--bone) calc(1.75vmin + 1px) 4vmin, #fff0 0 100%);
        width: 12vmin;
        height: 13vmin;
        left: 0.5vmin;
        top: 0.25vmin;
        border-radius: 6vmin 6vmin 4.5vmin 4.5vmin;
}

.cranium:before {
        content: "";
        position: absolute;
        width: 1.25vmin;
        height: 1.25vmin;
        bottom: -0.75vmin;
        left: 4.85vmin;
        background: var(--bone);
        border-radius: 100%;
        box-shadow: 1.25vmin 0 0 0 var(--bone);
}

.cranium:after {
        content: "";
        position: absolute;
        width: 5.25vmin;
        height: 1.5vmin;
        bottom: -0.95vmin;
        left: 3.5vmin;
        background: 
                radial-gradient(circle at 90% 10%, var(--bone) 0 1vmin, #fff0 calc(1vmin + 1px) 100%), 
                radial-gradient(circle at 10% 10%, var(--bone) 0 1vmin, #fff0 calc(1.........完整代码请登录后点击上方下载按钮下载查看