css实现一个小蜜蜂跟随鼠标飞舞动画效果代码-html代码-BFW代码库

css实现一个小蜜蜂跟随鼠标飞舞动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现一个小蜜蜂跟随鼠标飞舞动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
    :root {
  --bg-color:#fb1;
}
html {
  cursor:none;
}
body {
  background:
    radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px,
    radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px,
    linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0,
    linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
    linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
    linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1;
  background-size: 40px 60px;
  overflow:hidden;  
}

#bee {
  width:50px;
  height:50px;
  background:black;
  border-radius:50% 75% 0% 75%;
  background:linear-gradient(-50deg, black 15px, goldenrod 15px, goldenrod 25px, black 25px, black 40px, goldenrod 40px, goldenrod 50px, black 50px);
  box-shadow:inset 0 0 0 2px black, inset 5px -5px 5px 5px rgba(139,69,19,.5), -10px 20px 35px saddlebrown;  
  position:absolute;
  left:50%;
  top:50%;
  transform:rotate(-20deg);
}
#bee:before {
  content:'';
  width:35px;
  height:35px;
  border-radius:75% 50% 75% 25%;
  background:radial-gradient(circle at 10px 15px, black 3px, goldenrod 3px, goldenrod 20px, black);
  box-shadow:0 0 0 2px black; 
  position:absolute;
  left:-22px;
  top:-15px;
  transform:rotate(30deg);
}
#bee:after {
  content:'';
  width:30px;
  height:30px;
  position:absolute;
  left:-33px;
  top:-28px;
  border-radius:50%;
  z-index:-1;
  box-shadow:inset -2px 1px 0 black, 1px -2px 0 var(--bg-color), 3px -3px 0 black;
  animation:hair .33s linear infinite;
}
@keyframes hair {
  50% { transform:translateY(2px); }
}

.flip {
  /*   transition:.25s; */
  transform:rotate(20deg) scaleX(-1) !important;
}

.wings {
  width:50px;
  height:50px;
  background:linear-gradient(to bottom left, black, transparent 50px);
.........完整代码请登录后点击上方下载按钮下载查看