div+css实现蜜蜂活体动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：div+css实现蜜蜂活体动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#noise {
  position: absolute;
  opacity: 0.3;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(var(--sceneGrad2), var(--sceneGrad1));
  color: white;
  overflow: hidden;
  --bugBodyGrad1: #823800;
  --bugBodyGrad2: #6a6fff;
  --antler: #5f63e5;
  --sceneGrad1: #a454ff;
  --sceneGrad2: #6effe4;
}

#container {
  position: relative;
}

#cicada {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  mix-blend-mode: hard-light;
  z-index: 2;
  transform-origin: center;
}

#cicada-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#head {
  width: 6rem;
  height: 6rem;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: translateX(-50%);
  top: -60%;
  background: radial-gradient(#823800, #6a6fff);
  clip-path: polygon(
    50% 5%,
    75% 10%,
    95% 30%,
    90% 70%,
    75% 90%,
    50% 100%,
    25% 90%,
    10% 70%,
    5% 30%,
    25% 10%,
    50% 5%
  );
  z-index: 3;
  animation: wiggle-head 5s infinite ease-in-out;
}

#antlers {
  position: absolute;
  top: -6rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 4rem;
  z-index: 10;
}

.antler {
  position: absolute;
  width: 2rem;
  height: 4rem;
  transform-origin: bottom center;
  background: transparent;
}

/* Left Antler */
#antler-left {
  border-left: 0.3rem solid #5f63e5;
  border-bottom: 0.3rem solid #5f63e5;
  top: 2rem;
  left: 25%;
  transform: translate(-50%, -50%) rotate(160deg);
  transform-origin: top;
  animation: wiggle-antler-left 1s infinite ease-in-out;
}

/* Right Antler */
#antler-right {
  border-right: 0.3rem solid #5f63e5;
  border-bottom: 0.3rem solid #5f63e5;
  top: 2rem;
  left: 75%;
  transform: translate(-50%, -50%) rotate(-160deg);
  transform-origin: top;
  animation: wiggle-antler-right 1s infinite ease-in-out;
}

#eyes {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 35%;
  width: 100%;
  position: absolute;
  transform: scale(1);
  top: -50%;
  z-index: 6;
  animation: pulse 5s infinite ease-in-out;
}

#eye-left {
  background: radial-gradient(#ffccff, #ff66cc);
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  clip-path: polygon(
    30% 0%,
    70% 0%,
    100% 30%,
    100% 70%,
    70% 100%,
    30% 100%,
    0% 70%,
    0% 30%
  );
}

#eye-right {
  background: radial-gradient(#ffccff, #ff66cc);
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  clip-path: polygon(
    30% 0%,
    70% 0%,
    100% 30%,
    100% 70%,
    70% 100%,
    30% 100%,
    0% 70%,
    0% 30%
  );
}

#iris-left {
  background: #6a6fff;
  position: absolute;
  top: 25%;
  left: 25%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  clip-path: polygon(
    30% 0%,
    70% 0%,
    100% 30%,
    100% 70%,
    70% 100%,
    30% 100%,
    0% 70%,
    0% 30%
  );
}

#iris-right {
  background: #6a6fff;
  position: absolute;
  top: 25%;
  left: 75%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  clip-path: polygon(
    30% 0%,
    70% 0%,
    100% 30%,
    100% 70%,
    70% 100%,
    30% 100%,
    0% 70%,
    0% 30%
  );
}

#torso {
  position: relative;
  display: flex;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 8rem;
  height: 10rem;
  background: radial-gradient(#823800, #6a6fff);
  clip-path: polygon(
    50% 20%,
    50% 20%,
    80% 25%,
    90% 40%,
    90% 60%,
    80% 80%,
    50% 100%,
    20% 80%,
    10% 60%,
    10% 40%,
    20% 25%
  );
  z-index: 3;
  animation: wiggle-torso 1s infinite ease-in-out;
}

#stomach {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  width: 8rem;
  height: 20rem;
  clip-path: polygon(
    50% 0%,
    50% 0%,
    80% 20%,
    90% 40%,
    90% 60%,
    80% 80%,
    50% 100%,
    20% 80%,
    10% 60%,
    10% 40%,
    20% 20%
  );
  z-index: 2;
  animation: wiggle-stomach 3s infinite ease-in-out;
}

.segment {
  background: radial-gradient(#823800, #6a6fff);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  width: 8rem;
  flex-grow: 1;
}

#antlers {
  position: absolute;
  top: -50%;
  left: 50%;
  width: 6rem;
  height: 4rem;
}

#legs {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 4rem;
}

#leg-top-left {
  position: absolute;
  top: -5rem;
  left: -0.6rem;
  width: 0.6rem;
  height: 3rem;
  transform-origin: bottom;
  background: #5f63e5;
  transform: rotate(-10deg);
  animation: wiggle-leg-top-left 3s infinite ease-in-out;
}

#leg-top-left:before {
  content: "";
  position: absolute;
  top: -50%;
  left: 0%;
  width: 0.25rem;
  height: 2rem;
  background: #5f63e5;
  transform: skew(0deg, 0deg) rotate(0deg);
}

#leg-top-left:after {
  content: "";
  position: absolute;
  top: 60%;
  left: 120%;
  width: 0.8rem;
  height: 4rem;
  background: #5f63e5;
  transform: skew(0deg, 0deg) rotate(-45deg);
}

#leg-top-right {
  position: absolute;
  top: -5rem;
  right: -0.6rem;
  width: 0.6rem;
  height: 3rem;
  transform-origin: bottom;
  background: #5f63e5;
  transform: rotate(10deg) scaleX(-1);
  animation: wiggle-leg-top-right 3s infinite ease-in-out;
}

#leg-top-right:before {
  content: "";
  position: absolute;
  top: -50%;
  left: 0%;
  width: 0.25rem;
  height: 4rem;
  background: #5f63e5;
  transform: skew(0deg, 0deg) rotate(0deg);
}

#leg-top-right:after {
  content: "";
  position: absolute;
  top: 60%;
  left: 120%;
  width: 0.8rem;
  height: 4rem;
  background: #5f63e5;
  transform: skew(0deg, 0deg) rotate(-45deg);
}

/* LEGS MIDDLE */

#leg-middle-left {
  position: absolute;
  top: -3rem;
  left: -2rem;
  width: 0.9rem;
  height: 3rem;
  transform-origin: bottom;
  background: #5f63e5;
  transform: rotate(-120deg) scaleX(-1);
  animation: wiggle-leg-middle-left 3s infinite ease-in-out;
}

#leg-middle-left:before {
  content: "";
  position: absolute;
  top: -80%;
  left: 0%;
  width: 0.5rem;
  height: 4rem;
  background: #5f63e5;
  transform: skew(0deg, 0deg) rotate(0deg);
}

#leg-middle-left:after {
  content: "";
  position: absolute;
  top: 60%;
  left: 100%;
  width: 1rem;
  height: 4rem;
  background: #5f63e5;
  transform: skew(0deg, 0deg) rotate(-45deg);
}

#leg-middle-right {
  position: absolute;
  top: -3rem;
  right: -2rem;
  width: 0.9rem;
  height: 3rem;
  transform-origin: bottom;
  background: #5f63e5;
  transform: rotate(120deg);
  animation: wiggle-leg-middle-right 3s infinite ease-in-out;
}

#leg-middle-right:before {
  content: "";
  position: absolute;
  top: -80%;
  left: 0%;
  width: 0.5rem;
  height: 4rem;
  background: #5f63e5;
  transform: skew(0deg, 0deg) rotate(0deg);
}

#leg-middle-right:after {
  content: "";
  position: absolute;
  top: 60%;
  left: 100%;
  width: 1rem;
  height: 4rem;
  background: #5f63e5;
  transform: skew(0deg, 0deg) rotate(-45deg);
}

/* LEGS BOTTOM */

#leg-bottom-left {
  position: absolute;
  top: 2rem;
  left: -1.5rem;
  width: 0.9rem;
  height: 3rem;
  transform-origin: bottom;
  background: #5f63e5;
  transform: rotate(-160deg) scaleX(-1);
  animation: wiggle-leg-bottom-left 3s infinite ease-in-out;
}

#leg-bottom-left:before {
  content: "";
  position: absolute;
  top: -80%;
  left: 0%;
  width: 0.5rem;
  height: 4rem;
  background: #5f63e5;
  transform: skew(0deg, 0deg) rotate(0deg);
}

#leg-bottom-left:after {
  content: "";
  position: absolute;
  top: 60%;
  left: 100%;
  width: 1rem;
  height: 4rem;
  background: #5f63e5;
  transform: skew(0deg, 0deg) rotate(-45deg);
}

#leg-bottom-right {
  position: absolute;
  top: 2rem;.........完整代码请登录后点击上方下载按钮下载查看