div+css实现蜜蜂采花粉动画效果代码-html代码-BFW代码库

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

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

  
  
  
<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body .background {
  position: fixed;
  z-index: 0;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(45deg, #706e31, #aaad74 50%, #6b752c);
}
body .flower {
  transform: rotate(0deg);
  position: fixed;
  z-index: 1;
  bottom: -100px;
  left: 100px;
  height: 500px;
  width: 500px;
}
body .flower .bee {
  position: fixed;
  width: 400px;
  height: 170px;
  left: 50%;
  bottom: 55%;
  transform: rotate(20deg);
  display: flex;
  z-index: 4;
  animation: hover 5s ease-in-out infinite;
}
body .flower .bee:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 20px solid black;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  margin-top: 60px;
}
body .flower .bee .head {
  flex: 0 0 60px;
  height: 120px;
  background: yellow;
  border-radius: 200px 100px 100px 200px;
  position: relative;
}
body .flower .bee .head:before {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  height: 85px;
  width: 35px;
  background: black;
  border-radius: 100%;
  transform: rotate(10deg);
}
body .flower .bee .thorax {
  flex: 0 0 100px;
  height: 130px;
  background: black;
  position: relative;
  z-index: 5;
  border-radius: 30px 50px 50px 30px;
}
body .flower .bee .thorax .wings {
  position: absolute;
  left: 60px;
  top: -40px;
  height: 150px;
  width: 300px;
  transform-origin: left center;
  transform: rotate(-45deg);
  overflow: hidden;
  border-radius: 0 600% 100% 0;
  animation: buzz 0.1s linear infinite;
}
body .flower .bee .thorax .wings:before {
  content: "";
  display: block;
  height: 20px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -10px;
  width: 400%;
  background: white;
  transform: translateX(-570px) perspective(300px) rotateY(-80deg) scaleX(43%);
}
body .flower .bee .abdomen {
  flex: 0 0 230px;
  height: 130px;
  position: relative;
}
body .flower .bee .abdomen:before, body .flower .bee .abdomen:after {
  content: "";
  display: block;
  border-radius: 90px 100% 100% 90px;
  height: 100%;
  width: 100%;
  background-color: black;
  background-image: repeating-linear-gradient(90deg, yellow, yellow 30px, transparent 30px, transparent 60px);
  position: absolute;
  top: 0;
  left: 0;
}
body .flower .bee .abdomen:before {
  z-index: 0;
}
body .flower .bee .abdomen:after {
  z-index: 1;
  filter: blur(6px);
  opacity: 0.6;
}
body .flower .part {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: bottom left;
}
body .flower .part:nth-child(1) {
  filter: blur(6px);
}
body .flower .part:nth-child(2) {
  transform: scale(0.98) rotate(1.3deg);
  filter: blur(4px);
}
body .flower .part:nth-child(3) {
  transform: scale(0.96) rotate(0.5deg);
  filter: blur(2px);
}
body .flower .part:nth-child(5) {
  transform: scale(0.94) rotate(2deg);
}
body .flower .part:nth-child(6) {
  transform: scale(0.84) rotate(1deg);
}
body .flower .part .layer {
  height: 100%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  transform-origin: bottom left;
  z-index: 0;
}
body .flower .part .layer:nth-child(1) {
  transform: rotate(2.5deg);
}
body .flower .part .layer:nth-child(3) {
  transform: scale(95%) rotate(1.5deg);
}
body .flower .part .layer:nth-child(4) {
  transform: scale(90%) rotate(0.75deg);
}
body .flower .part .layer:nth-child(5) {
  transform: scale(85%) rotate(-0.7deg);
}
body .flower .part .layer:nth-child(6) {
  transform: scale(80%) rotate(2.5deg);
}
body .flower .part .layer:nth-child(7) {
  transform: scale(75%) rotate(0.5deg);
}
body .flower .part .layer:nth-child(8) {
  transform: scale(70%) rotate(1.6deg);
}
body .flower .part .layer:nth-child(9) {
  transform: scale(65%) rotate(2.5deg);
}
body .flower .part .layer .petal {
  width: 5px;
  height: 100%;
  background-image: linear-gradient(to bottom, #dd31b7, #fbc5e9);
  position: absolute;
  bottom: 0px;
  left: 0px;
  border-radius: 50px;
  transform-origin: bottom center;
}

body .flower .petal:nth-child(0) {
  transform: rotate(-95deg);
}

body .flower .petal:nth-child(1) {
  transform: rotate(-90deg);
}

body .flower .petal:nth-child(2) {
  transform: rotate(-85deg);
}

body .flower .petal:nth-child(3) {
  transform: rotate(-80deg);
}

body .flower .petal:nth-child(4) {
  transform: rotate(-75deg);
}

body .flower .petal:nth-child(5) {
  transform: rotate(-70deg);
}

body .flower .petal:nth-child(6) {
  transform: rotate(-65deg);
}

body .flower .petal:nth-child(7) {
  transform: rotate(-60deg);
}

body .flower .petal:nth-child(8) {
  transform: rotate(-55deg);
}

body .flower .petal:nth-child(9) {
  transform: rotate(-50deg);
}

body .flower .petal:nth-child(10) {
  transform: rotate(-45deg);
}

body .flower .petal:nth-child(11) {
  transform: rotate(-40deg);
}

body .flower .petal:nth-child(12) {
  transform: rotate(-35deg);
}

body .flower .petal:nth-child(13) {
  transform: rotate(-30deg);
}

body .flower .petal:nth-child(14) {
  transform: rotate(-25deg);
}

body .flower .petal:nth-child(15) {
  transform: rotate(-20deg);
}

body .flower .petal:nth-child(16) {
  transform: rotate(-15deg);
}

body .flower .petal:nth-child(17) {
  transform: rotate(-10deg);
}

body .flower .petal:nth-child(18) {
  transform: rotate(-5deg);
}

body .flower .petal:nth-child(19) {
  transform: rotate(0deg);
}

body .flower .petal:nth-child(20) {
  transform: rotate(5deg);
}

body .flower .petal:nth-child(21) {
  transform: rotate(10deg);
}

body .flower .petal:nth-child(22) {
  transform: rotate(15deg);
}

body .flower .petal:nth-child(23) {
  transform: rotate(20deg);
}

body .flower .petal:nth-child(24) {
  transform: rotate(25deg);
}

body .flower .petal:nth-child(25) {
  transform: rotate(30deg);
}

body .flower .petal:nth-child(26) {
  transform: rotate(35deg);
}

body .flower .petal:nth-child(27) {
  transform: rotate(40deg);
}

body .flower .petal:nth-child(28) {
  transform: rotate(45deg);
}

body .flower .petal:nth-child(29) {
  transform: rotate(50deg);
}

body .flower .petal:nth-child(30) {
  transform: rotate(55deg);
}

body .flower .petal:nth-child(31) {
  transform: rotate(60deg);
}

body .flower .petal:nth-child(32) {
  transform: rotate(65deg);
}

body .flower .petal:nth-child(33) {
  transform: rotate(70deg);
}

body .flower .petal:nth-child(34) {
  transform: rotate(75deg);
}

body .flower .petal:nth-child(35) {
  transform: rotate(80deg);
}

body .flower .petal:nth-child(36) {
  transform: rotate(85deg);
}

body .flower .petal:nth-child(37) {
  transform: rotate(90deg);
}

body .flower .petal:nth-child(38) {
  transform: rotate(95deg);
}

body .flower .petal:nth-child(39) {
  transform: rotate(100deg);
}

body .flower .petal:nth-child(40) {
  transform: rotate(105deg);
}

body .flower .petal:nth-child(41) {
  transform: rotate(110deg);
}

body .flower .petal:nth-child(42) {
  transform: rotate(115deg);
}

body .flower .petal:nth-child(43) {
  transform: rotate(120deg);
}

body .flower .petal:nth-child(44) {
  transform: rotate(125deg);
}

body .flower .petal:nth-child(45) {
  transform: rotate(130deg);
}

body .flower .petal:nth-child(46) {
  transform: rotate(135deg);
}

body .flower .petal:nth-child(47) {
  transform: rotate(140deg);
}

body .flower .petal:nth-child(48) {
  transform: rotate(145deg);
}

body .flower .petal:nth-child(49) {
  transform: rotate(150deg);
}

body .flower .petal:nth-child(50) {
  transform: rotate(155deg);
}

body .flower .petal:nth-child(51) {
  transform: rotate(160deg);
}

body .flower .petal:nth-child(52) {
  transform: rotate(165deg);
}

body .flower .petal:nth-child(53) {
  transform: rotate(170deg);
}

body .flower .petal:nth-child(54) {
  transform: rotate(175deg);
}

body .flower .petal:nth-child(55) {
  transform: rotate(180deg);
}

body .flower .petal:nth-child(56) {
  transform: rotate(185deg);
}

body .flower .petal:nth-child(57) {
  transform: rotate(190deg);
}

body .flower .petal:nth-child(58) {
  transform: rotate(195deg);
}

body .flower .petal:nth-child(59) {
  transform: rotate(200deg);
}

body .flower .petal:nth-child(60) {
  transform: rotate(205deg);
}

body .flower .petal:nth-child(61) {
  transform: rotate(210deg);
}

body .flower .petal:nth-child(62) {
  transform: rotate(215deg);
}

body .flower .petal:nth-child(63) {
  transform: rotate(220deg);
}

body .flower .petal:nth-child(64) {
  transform: rotate(225deg);
}

body .flower .petal:nth-child(65) {
  transform: rotate(230deg);
}

body .flower .petal:nth-child(66) {
  transform: rotate(235deg);
}

body .flower .petal:nth-child(67) {
  transform: rotate(240deg);
}

body .flower .petal:nth-child(68) {
  transform: rotate(245deg);
}

body .flower .petal:nth-child(69) {
  transform: rotate(250deg);
}

body .flower .petal:nth-child(70) {
  transform: rotate(255deg);
}

body .flower .petal:nth-child(71) {
  transform: rotate(260deg);
}

body .flower .petal:nth-child(72) {
  transform: rotate(265deg);
}

body .flower .petal:nth-child(73) {
  transform: rotate(270deg);
}

body .flower .petal:nth-child(74) {
  transform: rotate(275deg);
}

body .flower .petal:nth-child(75) {
  transform: rotate(280deg);
}

body .flower .petal:nth-child(76) {
  transform: rotate(285deg);
}

body .flower .petal:nth-child(77) {
  transform: rotate(290deg);
}

body .flower .petal:nth-child(78) {
  transform: rotate(295deg);
}

body .flower .petal:nth-child(79) {
  transform: rotate(300deg);
}

body .flower .petal:nth-child(80) {
  transform: rotate(305deg);
}

body .flower .petal:nth-child(81) {
  transform: rotate(310deg);
}

body .flower .petal:nth-child(82) {
  transform: rotate(315deg);
}

body .flower .petal:nth-child(83) {
  transform: rotate(320deg);
}

body .flower .petal:nth-child(84) {
  transform: rotate(325deg);
}

body .flower .petal:nth-child(85) {
  transform: rotate(330deg);
}

body .flower .petal:nth-child(86) {
  transform: rotate(335deg);
}

body .flower .petal:nth-child(87) {
  transform: rotate(340deg);
}

body .flower .petal:nth-child(88) {
  transform: rotate(345deg);
}

body .flower .petal:nth-child(89) {
  transform: rotate(350deg);
}

body .flower .petal:nth-child(90) {
  transform: rotate(355deg);
}

body .flower .petal:nth-child(91) {
  transform: rotate(360deg);
}

@keyframes hover {
  0% {
    transform: translateX(0) translateY(0) rotate(20deg);
  }
  50% {
    transform: translateX(-50px) translateY(-30px) rotate(15deg);
  }
  100% {
    transform: translateX(0) translateY(0) rotate(20deg);
  }
}
@keyframes buzz {
  0% {
    transform: rotate(-45deg);
    opacity: 0.2;
  }
  50% {
    transform: rotate(-65deg);
    opacity: 0.5;
  }
  100% {
    transform: rotate(-45deg);
    opacity: 0.2;
  }
}
</style>

  
</head>

<body >
  <div class="background"></div>
<div class="flower">
  <div class="part">
    <div class="layer">
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>       
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
    </div>
    <div class="layer">
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>       
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
    </div>
    <div class="layer">
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class=&qu.........完整代码请登录后点击上方下载按钮下载查看