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