jquery+css实现带声音的国庆节升国旗动画代码-html代码-BFW代码库

jquery+css实现带声音的国庆节升国旗动画代码

代码语言：html

所属分类：动画

代码描述：jquery+css实现带声音的国庆节升国旗动画代码，祝愿伟大的祖国母亲生日快乐，繁荣昌盛。

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

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        * {
      padding: 0;
      margin: 0;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      overflow: hidden;
      background: url(//repo.bfw.wiki/bfwrepo/image/66fa99c1de3cd.png) no-repeat center center;
      background-repeat: no-repeat;
      background-size: contain;
    }
    .btn {
      width: 96px;
     
      text-align: center;
      font-weight: 700;
      cursor: pointer;
      color: #fff;
      border-radius: 20px;
      background-color: red;
      padding: 10px;
    }
    .box {
        
      position: relative;
      width: 298px;
      height: 770px;
      display: none;
      zoom: 0.8;
    }
    .circle {
      position: relative;
      top: 1px;
      left: -5px;
      width: 20px;
      height: 20px;
      border-radius: 20px;
      background-image: radial-gradient(#f5f5f5, #bebebe);
    }
    .flagpole {
      width: 10px;
      height: 700px;
      background-image: linear-gradient(to right, #bebebe, #eee, #d2d2d2);
    }
    .red_flag {
      position: absolute;
      left: 10px;
      bottom: 50px;
      width: 288px;
      height: 192px;
      background-color: red;
    }
    .star img {
      position: absolute;
    }
    .star1 img {
      top: 20px;
      left: 20px;
      width: calc(192px * 0.3);
      height: calc(192px * 0.3);
    }
    .star:not(:first-child) img {
      width: calc(192px * 0.1);
      height: calc(192px * 0.1);
    }
    
    .star2 img {
      top: 10px;
      left: 88px;
      transform: rotate(-45deg);
    }
    .star3 img {
      top: 30px;
      left: 105px;
      transform: rotate(-30deg);
    }
    .star4 img {
      top: 58px;
      left: 105px;
    }
    .star5 img {
      top: 77px;
      left: 88px;
      transform: rotate(-45deg);
    }
    .soldier img {
      position: relative;
      left: 298px;
      bottom: 0;
    }
    .platform1 {
      position: absolute;
      bottom: 30px;
      left: -35px;
      width: 80px;
      height: 20px;
      border-radius: 2px;
      background-image: linear-gradient(to right, #b.........完整代码请登录后点击上方下载按钮下载查看