js+css实现蜜蜂在花丛中飞行动画效果代码-html代码-BFW代码库

js+css实现蜜蜂在花丛中飞行动画效果代码

代码语言：html

所属分类：动画

代码描述：js+css实现蜜蜂在花丛中飞行动画效果代码，单击鼠标添加更多蜜蜂

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html {
      width: 100%;
      height: 100%;
      font-size: 18px;
    }
    
    body {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
    }
    
    .info {
      position: fixed;
      z-index: -1;
      color: #86c5da;
      font-size: 2rem;
    }
    .info span {
      opacity: 0.2;
    }
    
    .scene {
      width: 100%;
      height: 100%;
      background: lightblue;
      z-index: -2;
      box-shadow: inset 0 -1rem 0 #27ae60;
    }
    .scene .flower {
      position: absolute;
      margin: auto;
      bottom: 0;
      left: 0;
      background: #27ae60;
      width: 1vmin;
      height: 20vmin;
    }
    .scene .flower .flowerhead {
      position: absolute;
      bottom: 100%;
      width: 600%;
      height: 80%;
      background: crimson;
      border-top-right-radius: 50%;
      border-top-left-radius: 50%;
      border-bottom-right-radius: 35% 40%;
      border-bottom-left-radius: 35% 40%;
      box-shadow: inset 0 -20vmin 20vmin rgba(0, 0, 0, 0.4);
      left: calc(-300% + .5vmin);
    }
    .scene .flower .flowerhead:before, .scene .flower.........完整代码请登录后点击上方下载按钮下载查看