div+css实现跟随鼠标漂浮的骷颅人骨效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：div+css实现跟随鼠标漂浮的骷颅人骨效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
:root {
  --tran: all 1s ease 0s;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, #000, #201437), linear-gradient(90deg, #000, #212121, #000), radial-gradient(ellipse at 50% 50%, #2a393c 35vmin, #303030);
  box-shadow: 0 0 12vmin 5vmin #000 inset;
}

.content {
  z-index: -1;
  position: absolute;
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  display: flex;
  transition: var(--tran);
  animation: start 4s ease 0s 1;
}

@keyframes floating {
  0% {
    margin-top: 5vmin;
  }
  100% {
    margin-top: -5vmin;
  }
}
@keyframes swinging-left {
  0% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}
@keyframes swinging-right {
  0% {
    transform: rotateY(180deg) rotate(5deg);
  }
  100% {
    transform: rotateY(180deg) rotate(-5deg);
  }
}
/*** SKELETON ***/
.skeleton {
  --bone: #fff;
  opacity: 0.965;
  width: 32vmin;
  height: 60vmin;
  position: absolute;
  z-index: 1;
  display: flex;
  justify-content: center;
  animation: floating 3s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s infinite alternate;
  transition: var(--tran);
}
.skeleton div {
  position: absolute;
}
.skeleton:before {
  content: "";
  position: absolute;
  background: #0006;
  width: 15vmin;
  height: 30vmin;
  bottom: -30vmin;
  transform: rotateX(61deg);
  border-radius: 100%;
  filter: blur(20px);
  opacity: 0.5;
  animation: shadow 0.5s linear 0s infinite alternate;
}

@keyframes shadow {
  0% {
    margin-left: 2vmin;
  }
  100% {
    margin-left: -2vmin;
  }
}
.head {
  width: 13vmin;
  height: 17vmin;
  top: 4.25vmin;
  animation: swinging-right 0.55s ease-in-out 0s infinite alternate;
  transform-origin: 50% 75%;
}

.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(1vmin + 1px) 100%);
  border-radius: 1vmin;
}

.nose {
  background: radial-gradient(circle at 68% 60%, #212121 0.5vmin, #fff0 calc(0.5vmin + 1px) 100%), radial-gradient(circle at 30% 60%, #212121 0.5vmin, #fff0 calc(0.5vmin + 1px) 100%);
  border: 0;
  top: 10.25vmin;
  height: 2.25vmin;
  width: 2.4vmin;
  left: 5.4vmin;
  transform: rotate(0deg);
  border-radius: 1vmin;
}
.nose:before {
  content: "";
  border: 1.2vmin solid #fff0;
  position: absolute;
  border-bottom-color: #212121;
  left: 0.035vmin;
  top: -1.1vmin;
  border-radius: 1vmin;
}

.mouth {
  border-radius: 100%;
  border: 0.5vmin solid #fff0;
  box-sizing: border-box;
  border-bottom-color: var(--bone);
  border-width: 0.75vmin;
  width: 11.75vmin;
  left: 0.6vmin;
  height: 15vmin;
  top: 0.85vmin;
  background: radial-gradient(circle at 35% 98%, var(--bone) 0 0.65vmin, #fff0 calc(0.65vmin + 1px) 100%), radial-gradient(circle at 45% 100%, var(--bone) 0 0.65vmin, #fff0 calc(0.65vmin + 1px) 100%), radial-gradient(circle at 55% 100%, var(--bone) 0 0.65vmin, #fff0 calc(0.65vmin + 1px) 100%), radial-gradient(circle at 65% 98%, var(--bone) 0 0.65vmin, #fff0 calc(0.65vmin + 1px) 100%);
  background-repeat: no-repeat;
}
.mouth:before, .mouth:after {
  content: "";
  position: absolute;
  border-radius: 100%;
  background: var(--bone);
  width: 0.75vmin;
  height: 0.75vmin;
  left: 1.1vmin;
  bottom: 1vmin;
}
.mouth:after {
  left: 8.45vmin;
}

.neck {
  width: 4vmin;
  height: 3vmin;
  top: 20vmin;
  margin-left: -0.25vmin;
}

.torso {
  width: 10vmin;
  height: 16vmin;
  top: 21.5vmin;
  margin-left: -0.25vmin;
  z-index: 2;
}

.pelvis {
  background: radial-gradient(circle at 82% 36%, #fff0 0.5vmin, var(--bone) calc(0.5vmin + 1px) 4vmin, #fff0 0 100%), radial-gradient(circle at 19% 36%, #fff0 0.5vmin, var(--bone) calc(0.5vmin + 1px) 4vmin, #fff0 0 100%);
  width: 8.5vmin;
  height: 4.5vmin;
  bottom: -1.5vmin;
  left: 0.9vmin;
  clip-path: polygon(9% 14%, 13% 10%, 19% 8%, 25% 10%, 29% 12%, 32% 15%, 34% 17%, 38% 18%, 46% 20%, 51% 20%, 58% 20%, 64% 20%, 71% 16%, 75% 11%, 81% 7%, 86% 8%, 91% 12%, 95% 19%, 97% 29%, 97% 42%, 95% 50%, 93% 56%, 92% 61%, 92% 69%, 92% 76%, 89% 86%, 86% 91%, 81% 94%, 78% 94%, 72% 90%, 67% 85%, 62% 79%, 57% 73%, 53% 67%, 49% 66%, 45% 68%, 41% 74%, 36% 84%, 31% 90%, 26% 94%, 20% 96%, 15% 93%, 12% 89%, 11% 84%, 10% 78%, 10% 72%, 10% 66%, 9% 59%, 7% 54%, 5% 45%, 4.5% 36%, 5% 30%, 6% 23%);
}

.column {
  width: 1.5vmin;
  height: 8.75vmin;
  background: var(--bone);
  border-radius: 0.25vmin;
  left: 4.45vmin;
  top: 2.5vmin;
}
.column:before, .column:after {
  content: "";
  position: absolute;
  background: var(--bone);
  border-radius: 0.25vmin;
  width: 100%;
  height: 1vmin;
  top: -1.25vmin;
  box-shadow: 0 -1.125vmin 0 0 var(--bone), 0 -2.25vmin 0 0 var(--bone);
}
.column:after {
  top: 10vmin;
}

.rib {
  width: 8.5vmin;
  height: 2.75vmin;
  left: 1vmin;
  top: 9vmin;
}
.rib:before, .rib:after {
  content: "";
  position: absolute;
  width: 2.5vmin;
  height: 0.5vmin;
  background: #f0f0;
  border-radius: 100%;
  left: 0.3vmin;
  top: 0vmin;
  border: 0.85vmin solid var(--bone);
  border-top-color: #fff0;
  filter: drop-shadow(0px -1.5vmin 0 var(--bone)) drop-shadow(0px -1.5vmin 0 var(--bone)) drop-shadow(0px -1.5vmin 0 var(--bone));
}
.rib:after {
  left: 4vmin;
}
.rib + .rib {
  top: 2.5vmin;
}
.rib + .rib:before, .rib + .rib:after {
  filter: none;
  width: 1.85vmin;
  left: 1vmin;
}
.rib + .rib:after {
  left: 4vmin;
}

.clavicle {
  width: 11vmin;
  height: 2.75vmin;
  left: -0.25vmin;
  top: 0vmin;
}
.clavicle:before, .clavicle:after {
  content: "";
  position: absolute;
  width: 2.75vmin;
  height: 0.1vmin;
  border-radius: 100%;
  left: -0.15vmin;
  top: 1.25vmin;
  border: 0.95vmin solid var(--bone);
  border-bottom-color: #fff0;
  transform: rotate(-12deg);
}
.clavicle:after {
  left: 6.35vmin;
  transform: rotate(12deg);
}

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

.arm {
  width: 3.4vmin;
  height: 20vmin;
  transform: rotate(3deg);
  left: 7.25vmin;
  top: -0.5vmin;
  transform-origin: 50% 1vmin;
  animation: swinging-left 0.55s ease-in-out 0s infinite alternate;
  filter: drop-shadow(0px 0px 0px black) drop-shadow(0px 0px 1px black);
}
.arm + .arm {
  transform: rotateY(180deg) rotate(3deg);
  left: 17.25vmin;
  animation: swinging-right 0.55s ease-in-out 0s infinite alternate;
  transform-origin: 55% 1vmin;
}

.hand {
  width: 5.5vmin;
  height: 6vmin;
  bottom: 0;
  left: -2.1vmin;
  z-index: -1;
}

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

.leg {
  width: 4.25vmin;
  height: 19vmin;
  transform: rotate(3deg);
  left: 2.65vmin;
  top: -1vmin;
  border-radius: 1px 1px 30% 40%;
  transform-origin: 50% 1vmin;
  animation: swinging-left 0.55s ease-in-out 0s infinite alternate;
}
.leg + .leg {
  transform: rotateY(180deg) rotate(3deg);
  left: 8vmin;
  animation: swinging-right 0.55s ease-in-out 0s infinite alternate;
  transform-origin: 55% 1vmin;
}

.foot {
  width: 7vmin;
  height: 4vmin;
  top: 20.5vmin;
  left: -2.5vmin;
  transform: rotate(-35deg);
  transform-origin: 1vmin 50%;
}

/*** BONES ***/
.bone {
  background: var(--bone);
  width: 1vmin;
  height: 5vmin;
}
.bone:before, .bone:after {
  content: "";
  background: var(--bone);
  width: 1vmin;
  height: 1vmin;
  position: absolute;
  left: -0.5vmin;
  top: -0.5vmin;
  border-radius: 100%;
  box-shadow: 1vmin 0 0 0 var(--bone);
}
.bone:after {
  top: calc(100% - 0.5vmin);
}

.arm .bone {
  top: 3.125vmin;
  left: 1.25vmin;
}
.arm .bone + .bone {
  top: 9.125vmin;
  left: 1.2vmin;
  width: 0.5vmin;
  box-shadow: 0.65vmin 0 0 0 var(--bone);
}

.hand .bone {
  width: 1.75vmin;
  height: 1.25vmin;
  border-radius: 100%;
  box-shadow: 0.65vmin 0 0 0 var(--bone);
  top: 0.75vmin;
  left: 2.25vmin;
}
.hand .bone:before, .hand .bone:after {
  top: 1.325vmin;
  left: -0.35vmin;
  width: 1.25vmin;
  box-shadow: 1.5vmin 0 0 0 var(--bone);
}
.hand .bone + .bone {
  width: 0.5vmin;
  height: 1vmin;
  border-radius: 100%;
  box-shadow: 0 1.1vmin 0 -0.05vmin var(--bone);
  top: 0.8vmin;
  left: 1.35vmin;
  transform: rotate(50deg);
}
.hand .bone + .bone:before, .hand .bone + .bone:after {
  display: none;
}
.hand .bone + .bone + .bone {
  width: 0.5vmin;
  height: 1vmin;
  box-shadow: 0 1.1vmin 0 -0.09vmin var(--bone);
  top: 3vmin;
  left: 1.4vmin;
  transform: rotate(6deg);
}
.hand .bone + .bone + .bone + .bone {
  top: 3.25vmin;
  left: 2.35vmin;
}
.hand .bone + .bone + .bone + .bone + .bone {
  top: 3.25vmin;
  left: 3.25vmin;
  transform: rotate(0deg);
}
.hand .bone + .bone + .bone + .bone + .bone + .bone {
  top: 3.25vmin;
  left: 4.25vmin;
  transform: rotate(0deg);
  width: 0.45vmin;
  height: 0.75vmin;
  box-shadow: 0 0.8vmin 0 -0.09vmin var(--bone);
}

.leg .bone {
  left: 1.75vmin;
  top: 3vmin;
  height: 6.5vmin;
}
.leg .bone + .bone {
  left: 1.75vmin;
  top: 11.75vmin;
  height: 6.75vmin;
  width: 0.5vmin;
  box-shadow: 0.65vmin 0 0 0 var(--bone);
}

.leg .bone.ball {
  width: 1.25vmin;
  height: 1.25vmin;
  top: 10vmin;
  border-radius: 100%;
  box-shadow: none;
}
.leg .bone.ball:before, .leg .bone.ball:after {
  display: none;
}

.foot .bone {
  width: 2.2vmin;
  height: 1.5vmin;
  border-radius: 1vmin 0.75vmin 1vmin 1vmin;
  top: 1.2vmin;
  left: 4vmin;
  transform: rotate(-15deg);
}
.foot .bone + .bone {
  width: 1vmin;
  height: 0.95vmin;
  top: 2vmin;
  left: 3vmin;
  box-shadow: -0.65vmin 0 0 -0.05vmin var(--bone);
}
.foot .bone + .bone + .bone {
  width: 0.65vmin;
  height: 0.65vmin;
  top: 2.75vmin;
  left: 1.25vmin;
  box-shadow: -0.5vmin 0 0 -0.1vmin var(--bone), 0.45vmin 0 0 0.05vmin var(--bone);
}
.foot .bone:before, .foot .bone:after {
  display: none;
}

/*** CAM ***/
.cam {
  float: left;
  width: 11.11%;
  height: 11.11%;
  z-index: 1;
  position: relative;
  cursor: pointer;
  cursor: zoom-in;
  /*box-shadow: 0 0 0 1px #f004 inset;*/
}
.cam:nth-child(1):hover ~ .content {
  transform: translateY(-40vh) translateX(-40vw);
}
.cam:nth-child(2):hover ~ .content {
  transform: translateY(-40vh) translateX(-30vw);
}
.cam:nth-child(3):hover ~ .content {
  transform: translateY(-40vh) translateX(-20vw);
}
.cam:nth-child(4):hover ~ .content {
  transform: translateY(-40vh) translateX(-10vw);
}
.cam:nth-child(5):hover ~ .content {
  transform: translateY(-40vh) translateX(0vw);
}
.cam:nth-child(6):hover ~ .content {
  transform: translateY(-40vh) translateX(10vw);
}
.cam:nth-child(7):hover ~ .content {
  transform: translateY(-40vh) translateX(20vw);
}
.cam:nth-child(8):hover ~ .content {
  transform: translateY(-40vh) translateX(30vw);
}
.cam:nth-child(9):hover ~ .content {
  transform: translateY(-40vh) translateX(40vw);
}
.cam:nth-child(10):hover ~ .content {
  transform: translateY(-30vh) translateX(-40vw);
}
.cam:nth-child(11):hover ~ .content {
  transform: translateY(-30vh) translateX(-30vw);
}
.cam:nth-child(12):hover ~ .content {
  transform: translateY(-30vh) translateX(-20vw);
}
.cam:nth-child(13):hover ~ .content {
  transform: translateY(-30vh) translateX(-10vw);
}
.cam:nth-child(14):hover ~ .content {
  transform: translateY(-30vh) translateX(0vw);
}
.cam:nth-child(15):hover ~ .content {
  transform: translateY(-30vh) translateX(10vw);
}
.cam:nth-child(16):hover ~ .content {
  transform: translateY(-30vh) translateX(20vw);
}
.cam:nth-child(17):hover ~ .content {
  transform: translateY(-30vh) translateX(30vw);
}
.cam:nth-child(18):hover ~ .content {
  transform: translateY(-30vh) transl.........完整代码请登录后点击上方下载按钮下载查看