在移动设备上留下空白空间？

【问题标题】：leaving empty space on mobile devices?在移动设备上留下空白空间？
【发布时间】：2021-05-05 16:21:23
【问题描述】：

我有一个问题，当我打开 chrome 开发工具并看到右侧有一个尴尬的空间并且标题溢出时，网站在移动设备上没有占用 100% 的宽度。我在 StackOverflow HTML body not filling complete width on mobile devices [closed] 上看到了一个类似的问题，但它没有给我正确的答案，比如当我给 Html 和 body 提供 100% 宽度时它不起作用，如果给 body 提供 position: fixed;，它会禁用滚动并且使用position: absolute; 它也无法正常工作，并且标题超出了正文（我不确定标题或正文的问题）。 另一个问题是，当我在移动视图上看到该站点时，森林不会下降给蜂箱腾出空间，我已将display: flex; 和flex-wrap: wrap 分配给class="hero-wrapper" 当我在移动视图中调整窗口大小时，蜂箱与森林重叠，所以为什么它没有为自己腾出空间或者为什么森林没有给它空间

/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'); */

html{
    border:5px solid blue;
}
*,::before,::after{
 margin:0;
 padding:0;
 box-sizing: border-box;   
}
body{
    font-family:Roboto ;
    /* border: 3px solid red; */
    /* position: fixed; */
    position: absolute;
    /* width:100%; */
}
.container{
    border:2px solid black;  
    /* padding:10px; */
   width:100%;
}
.header{
    /* border:2px solid rgb(255, 179, 0); */
    width:100%;
    padding:.5em .5em;
}
.header-wrapper{
    display:flex;
    align-items: center;
    justify-content:space-between;
    padding:.8em 0em;
    /* border:2px solid blue; */
    width:90%;
    margin:auto;
}
.site-title{
  /* border: 2px solid red; */
  margin-left: 2em;
  font-size:2.3em;
  font-weight:400;
    

}
.site-title-span{
    font-weight:750;
    color:#E47700;
}
.nav{
    /* border:2px solid magenta; */
    margin-right:2em;
    /* align-self: flex-end; */
    width:45%;
}
.nav ul{
 display: flex;
 list-style: none;
 font-size:1.5em;
 justify-content: space-between;
}
/* .nav ul li{
  margin-right:1.5em;
} */
.nav ul li a {
    text-decoration: none;
 color:black;
  font-weight: 500;
  padding:6px;
}
.nav ul li a:hover{
    color:white;
    background:#FEBD33;
    border-radius:50px;
    transition: .3s all ease;
}
/* GO AND DO IT IN JS */
.active{
    border-radius:50px;
    background-color: #FEBD33;
    color: white;
    padding:0 12px;
}
.hero{
    /* border:2px solid red; */
    height:40vh;
    font-family: poppins;
    /* overflow: hidden; */
    
    
}
.hero-wrapper{
    /* border: 2px solid hotpink; */
    width:80%;
    margin:0 auto;
    margin-top:130px;
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items:center;


}
.site-info{
        /* position: relative;
        top: 155px;
        left: 10.9em; */
        display: inline-block;
        width: 25em;
        line-height: 28px;
        /* border: 2px solid rebeccapurple; */
}
.site-info-heading{
    font-size:3em;
    /* border: 2px solid rebeccapurple; */

}
.site-info-text{
  font-size: 25px;
  font-weight: 600;
  margin-top: 6px;
  /* border: 2px solid rebeccapurple; */

}
.site-info-btn{
    font-size:1.3em;
    border-radius:50px;
    padding:.3em .5em;
    border:none;
    background-color: #33BC00;
    color:white;
    margin-top: 19px;
    /* border: 2px solid rebeccapurple; */

}
.hero-beehive{
     position: relative;
     top: 0px;
     left:0px;
    /* right: 1em;  */
    /* display:inline-block; */
    width:300px;
    height:300px;
    /* border: 2px solid rebeccapurple; */


}
svg{
    /* border:2px solid red; */
     width:28.5em;
     height:25em;
     float:left;
     /* margin-left:0; */
    /* display:inline-block; */
    position:static;
    top:0px;
    left:0;
    /* overflow: hidden; */
    
    /* float: right; */

}
#b-peice-1,#b-peice-2,#b-peice-3
#b-peice-4,#b-peice-5,#b-peice-6,
#b-peice-7{
    transform:translateY(px);
    position:absolute;
}
.beehive-piece,.bee{
    transition: .7s ;

}
.gate-keeper-bee,#beehive-gate{
    transition: 2s ;

}

.forest{
  border:2px solid red;
  width:100%;    
}

/* HONEY BEE WINGS FLYING ANIM */
#small-wing{
    /* anim`ation: small-wing 2s infinite alternate ; */
     animation: check .09s infinite alternate ;
     /* animation-name: check;
     animation-duration: 1s;
     animation-iteration-count: infinite; */
     /* transform: rotate(10deg); */
      
}
#large-wing{
    animation: check .09s infinite alternate ;
    
}
@keyframes check{
    0%{
    transform: rotate(0deg);
    }
    50%{
        transform: rotate(-.4deg);

    }
    100%{
        transform: rotate(.4deg);

    }
}
.small-wing{
    /* anim`ation: small-wing 2s infinite alternate ; */
     animation: check .09s infinite alternate ;
     /* animation-name: check;
     animation-duration: 1s;
     animation-iteration-count: infinite; */
     /* transform: rotate(10deg); */
    transform-origin: center;
      
}
.large-wing{
    animation: check .09s infinite alternate ;
    transform-origin: center;
    
}
@keyframes check{
    0%{
    transform: rotate(0deg);
    }
    50%{
        transform: rotate(-2.5deg);
    transform-origin: center;


    }
    100%{
        transform: rotate(2.5deg);

    }

}

对一堆 SVG 感到抱歉

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>


    <title>Document</title>
</head>

<body>
    <div class="container">

        <div class="header">
            <!--header open-->
            <div class="header-wrapper">
                <div class="site-title">
                    <p>

                        <span class="site-title-span">B</span>ee
                        <span class="site-title-span">B</span>uzz
                    </p>
                </div>

                <div class="nav">
                    <ul>
                        <li><a href="#" class="active">HOME</a></li>
                        <li><a href="#">SERVICES</a></li>
                        <li><a href="#">CONTACT</a></li>
                        <li><a href="#">ABOUT</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--header closed-->


        <!-- HERO SECTION  -->
        <div class="hero">
            <div class="hero-wrapper">

                <div class="site-info">
                    <h1 class="site-info-heading">
                        <span style="color:#E47700;font-weight:bolder;">B</span>ee
                        <span style="color:#E47700;font-weight:bolder;">B</span>uzz
                        <span style="font-size:.5em;">TM</span>
                    </h1>
                    <p class="site-info-text">
                        We are providing pure
                        forest bee honey and
                        protecting our environment
                    </p>
                    <button class="site-info-btn">
                        Read more
                    </button>
                </div>

                <div class="hero-beehive">

                    <svg width="300" height="300" viewBox="0 50 630 630" fill="none" xmlns="http://www.w3.org/2000/svg">


                        <symbol id="theBee" viewBox="0 0 78 49" >
                            <g id="complete_bee">
                              <path id="bee head" d="M11.553 35.5047C16.3904 38.8245 21.8681 37.8364 24.0023 36.4532V15.1115C22.9352 14.4397 19.5917 13.499 14.7542 15.1115C9.9168 16.724 8.37329 20.5655 7.99604 21.7512C6.88944 25.2291 6.71554 32.1848 11.553 35.5047Z" fill="#FFE818" stroke="black" />
                              <circle id="bee eye" cx="15.532" cy="21.6908" r="2.96412" fill="#313131" />
                              <path id="bee trunk" d="M65.8034 15.1697C45.3154 7.5816 30.1154 12.008 23.9501 15.1697V36.6299C37.3242 43.649 56.6739 38.0527 64.1435 34.3772C78.0156 27.5513 77.7785 19.6049 65.8034 15.1697Z" fill="#FFE818" stroke="black" />
                              <path id="trunk lines" d="M32.961 12.087C30.4711 16.1577 26.9142 26.5519 32.3682 39.3569L35.8065 39.8312C29.8309 27.5004 34.2652 15.5649 36.7551 11.4942L32.961 12.087Z" fill="#4E4E4E" stroke="black" />
                              <path id="trunk lines_2" d="M42.9204 39.8312C36.9447 27.5005 41.2605 15.0907 43.7503 11.02L47.7815 11.1385C45.2917 15.2092 40.5017 27.1448 46.4773 39.4755L42.9204 39.8312Z" fill="#313131" stroke="black" />
                              <path id="trunk lines_3" d="M53.947 38.0527C47.2667 27.313 51.8749 15.6325 54.6584 12.087L58.3339 12.7984C55.5504 16.3439 50.8236 26.246 57.504 36.9856L53.947 38.0527Z" fill="#313131" stroke="black" />
                              <path id="trunk lines_4" d="M63.7528 34.6143C56.6849 26.8661 61.298 16.5925 64.38 14.6955L67.5819 15.8811C65.3292 18.6081 61.4051 23.9435 66.3963 33.1916L63.7528 34.6143Z" fill="#313131" stroke="black" />
                          
                              <path id="small-wing" d="M61.4166 1.06052C55.8203 0.206853 39.1659 8.60919 32.6053 12.0871C54.3264 11.3283 59.9938 9.00435 61.4166 8.05583C63.2303 6.8467 67.0128 1.91419 61.4166 1.06052Z" fill="#99CEFF" stroke="black" />
                          
                              <path id="large-wing" d="M32.9609 11.9685C48.0977 7.26541 80.3166 -2.14073 74.6957 7.34446C68.7675 14.5769 44.3036 13.6679 32.9609 11.9685Z" fill="#81D1FE" stroke="black" />
                              <path id="bee sting" d="M70.4275 30.7017L73.273 27.7376L76 32.7173L70.4275 30.7017Z" fill="#313131" stroke="black" />
                          
                              <path id="antenna" d="M13.1606 15.8811C13.4768 12.6008 12.1173 5.73197 4.14972 4.4989M10.3151 17.8967C9.36656 14.4583 6.09418 8.05584 0.592773 9.95288" stroke="black" />
                              <path id="bee legs" d="M30.3525 39.1198L26.2028 43.151L28.2184 46.2337M35.6879 39.9497L31.7753 44.5738L34.2652 48.605" stroke="black" />
                              <circle id="antenna ball" cx="4.38689" cy="4.38033" r="0.592824" fill="#FFE818" />
                              <circle id="antenna ball_2" cx="0.592824" cy="9.83431" r="0.592824" fill="#FFE818" />
                              <path id="bee behind legs" d="M49.2044 39.2384L45.6475 43.6253L47.6631 45.9965M55.4883 37.8156L50.8643 43.6253L55.4883 46.8265" stroke="black" />
                            </g>
                          </symbol>



                        <g id="beehive 1">
                            <g id="first-beehive-setm">
                            
                                <path id="hive-stem"
                                    d="M353 80C361.284 80 368 86.7157 368 95V97C368 105.284 361.284 112 353 112H15C6.71573 112 0 105.284 0 97V95C0 86.7157 6.71573 80 15 80H217.787C221.765 80 225.58 78.4196 228.393 75.6066L261.393 42.6066C267.251 36.7487 276.749 36.7487 282.607 42.6066L288.971 48.9706C292.853 52.8528 292.853 59.1472 288.971 63.0294C282.708 69.292 287.143 80 296 80H353Z"
                                    fill="#502601" />
                                <path id="leaft-up"
                                    d="M368 0L375.032 7.032C385.896 17.898 392 32.634 392 48C392 63.366 385.896 78.102 375.032 88.968L368 96L360.968 88.968C350.104 78.102 344 63.366 344 48C344 32.634 350.104 17.898 360.968 7.032L368 0Z"
                                    fill="#008100" />
                                <path id="leaf-side"
                                    d="M464 96L456.968 103.032C446.102 113.896 431.366 120 416 120C400.634 120 385.898 113.896 375.032 103.032L368 96L375.032 88.968C385.898 78.104 400.634 72 416 72C431.366 72 446.102 78.104 456.968 88.968L464 96Z"
                                    fill="#33BC00" />
                                <path id="anchor" d="M152 112H184V160H152V112Z" fill="#763A02" />
                            </g>4
                        <g>
                              <!-- beehive piece -->
                            <path id="b-peice-7" class="beehive-piece" style="transform: translate(1000px,250px);"
                                d="M112 432H232C240.837 432 248 439.163 248 448C248 456.837 240.837 464 232 464H112C103.163 464 96 456.837 96 448C96 439.163 103.163 432 112 432Z"
                                fill="#E47700" />
                                <!-- beehive piece -->  
                            <path id="b-peice-6" class="beehive-piece" style="transform: translate(1000px,250px);"
                                d="M72 384H272C285.255 384 296 394.745 296 408C296 421.255 285.255 432 272 432H72C58.745 432 48 421.255 48 408C48 394.745 58.745 384 72 384Z"
                                fill="#FF8800" />
                                <!-- beehive piece -->
                            <path id="b-peice-5" class="beehive-piece" style="transform: translate(1000px,250px);"
                                d="M40 336C143.098 336 200.902 336 304 336C317.255 336 328 346.745 328 360C328 373.255 317.255 384 304 384H40C26.745 384 16 373.255 16 360C16 346.745 26.745 336 40 336Z"
                                fill="#FFA900" />
                                <!-- beehive piece 4 -->
                            <path id="b-peice-4" class="beehive-piece" style="transform: translate(1000px,250px);"
                                d="M24 288H320C333.255 288 344 298.745 344 312C344 325.255 333.255 336 320 336H24C10.745 336 0 325.255 0 312C0 298.745 10.745 288 24 288Z"
                                fill="#FEBD33" />

                                <!-- beehive piece 3 -->
                            <path id="b-peice-3" class="beehive-piece" style="transform: translate(1000px,250px);"
                                d="M40 240H304C317.255 240 328 250.745 328 264C328 277.255 317.255 288 304 288H40C26.745 288 16 277.255 16 264C16 250.745 26.745 240 40 240Z"
                                fill="#FFA900" />

                                <!-- beehive piece 2 -->
                            <path id="b-peice-2" style="transform: translate(1000px,250px);"class="beehive-piece"
                                d="M72 192H272C285.255 192 296 202.745 296 216C296 229.255 285.255 240 272 240H72C58.745 240 48 229.255 48 216C48 202.745 58.745 192 72 192Z"
                                fill="#FF8800" />

                                <!-- beehive piece 1 -->
                            <path id="b-peice-1" class="beehive-piece" style="transform: translate(1000px,250px);"
                                d="M112 160H232C240.837 160 248 167.163 248 176C248 184.837 240.837 192 232 192H112C103.163 192 96 184.837 96 176C96 167.163 103.163 160 112 160Z"
                                fill="#E47700" />


                                <!-- beehive keeper -->
                            <path id="beehive-gate"  style="transform: translate(1000px,250px);"
                                d="M136 384H200V352C200 334.327 185.673 320 168 320C150.327 320 136 334.327 136 352V384Z"
                                fill="#763A02" />
                        </g>



                        <!-- <use xlink:href="#theBee" width="62.4" height="38.4"/> -->
                        <!-- <use xlink:href="#theBee" width="62.4" height="38.4" x="344" y="288" /> -->

                        <!-- corresponding piece-1  -->
                        <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-1 bee" width="62.4" height="38.4" x="80" y="155"  />
                        <use xlink:href="#theBee" style="transform: translate(1000px,250px);"
                        class="corr-p-1 bee"   width="62.4" height="38.4" x="220" y="155" />

                        
                        <!-- corresponding piece-2  -->
                        <use xlink:href="#theBee" style="transform: translate(1000px,250px);"   width="62.4" height="38.4" class="corr-p-2 bee" x="25" y="195" />
                        <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-2 bee"  width="62.4" height="38.4" x="260" y="195" />


                        <!-- corresponding piece-3  -->
                        <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-3 bee" width="62.4" height="38.4" x="-6" y="245" />
                        <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-3 bee" width="62.4" height="38.4" x="290" y="245" />

                        <!-- corresponding piece-4  -->
                        <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-4 bee" width="400" height="38.4" x="145" y="295" />
                        <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-4 bee" width="400" height="38.4" x="-200" y="295" />
                        
                        <!-- corresponding piece-5  -->
                        <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-5 bee" width="400" height="38.4" x="135" y="345" />
                        <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-5 bee" width="400" height="38.4" x="-180" y="345" />

                        <!-- corresponding piece-6  -->
                        <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-6 bee" width="400" height="38.4" x="100" y="390" />
                        <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-6 bee" width="400" height="38.4" x="-150" y="390" />

                        <!-- corresponding piece-7  -->
                        <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-7 bee" width="400" height="38.4" x="50" y="435" />
                        <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-7 bee" width="400" height="38.4" x="-100" y="435" />
                        
                        <!-- gate keeper bee -->
                        <use xlink:href="#theBee" 
                        class="gate-keeper-bee"
                        style="transform: translate(1000px,250px);"
                         width="400" height="38.4" x="-30" y="290" />
                        
                    </svg>

                </div>


               
            


            </div>

        </div>
 
        <div class="forest-container">
            <!--<img src="https://www.flaticon.com/svg/vstatic/svg/2913/2913520.svg?token=exp=1620194205~hmac=2a585b989b5d37a28d48adca1d210aeb" style="width:100%;"
             class="forest" alt="forest-vector">-->
             
             
        </div>








        <!--END OF THE CONTAINER-->
    </div>
    <script src="script.js"></script>

</body>

</html>

let beehivePiece = document.querySelectorAll(".beehive-piece");
let bees1 = document.querySelectorAll(".corr-p-1");
let bees2 = document.querySelectorAll(".corr-p-2");
let bees3 = document.querySelectorAll(".corr-p-3");
let bees4 = document.querySelectorAll(".corr-p-4");
let bees5 = document.querySelectorAll(".corr-p-5");
let bees6 = document.querySelectorAll(".corr-p-6");
let bees7 = document.querySelectorAll(".corr-p-7");
let beehiveGate = document.querySelector("#beehive-gate");
let gatekeeperBee = document.querySelector(".gate-keeper-bee");




// console.log(gatekeeperBee)


// console.log(beehivePiece[1])

let a = 1500

window.addEventListener("load",check)
function check(){
   setTimeout(()=>{
       beehivePiece[6].style="transform:translate(0px,0px)";
       bees1[0].style="transform:translate(0px,0px)";
       bees1[1].style="transform:translate(0px,0px)";
       setTimeout(()=>{
        bees1[0].style="transform:translate(1000px,250px)";
        bees1[1].style="transform:translate(1000px,250px)";
       },1300)
   },1500)

//  For BEES 2
   setTimeout(()=>{
    beehivePiece[5].style="transform:translate(0px,0px)";
    bees2[0].style="transform:translate(0px,0px)";
    bees2[1].style="transform:translate(0px,0px)";
    setTimeout(()=>{
     bees2[0].style="transform:translate(1000px,250px)";
     bees2[1].style="transform:translate(1000px,250px)";
    },1300)
},2500)

//  For BEES 3
setTimeout(()=>{
    beehivePiece[4].style="transform:translate(0px,0px)";
    bees3[0].style="transform:translate(0px,0px)";
    bees3[1].style="transform:translate(0px,0px)";
    setTimeout(()=>{
     bees3[0].style="transform:translate(1000px,250px)";
     bees3[1].style="transform:translate(1000px,250px)";
    },1300)
},3000)

//  For BEES 4
setTimeout(()=>{
    beehivePiece[3].style="transform:translate(0px,0px)";
    bees4[0].style="transform:translate(0px,0px)";
    bees4[1].style="transform:translate(0px,0px)";
    setTimeout(()=>{
     bees4[0].style="transform:translate(1000px,250px)";
     bees4[1].style="transform:translate(1000px,250px)";
    },1300)
},3500)

//  For BEES 5
setTimeout(()=>{
    beehivePiece[2].style="transform:translate(0px,0px)";
    bees5[0].style="transform:translate(0px,0px)";
    bees5[1].style="transform:translate(0px,0px)";
    setTimeout(()=>{
     bees5[0].style="transform:translate(1000px,250px)";
     bees5[1].style="transform:translate(1000px,250px)";
    },1300)
},4000)


//  For BEES 6
setTimeout(()=>{
    beehivePiece[1].style="transform:translate(0px,0px)";
    bees6[0].style="transform:translate(0px,0px)";
    bees6[1].style="transform:translate(0px,0px)";
    setTimeout(()=>{
     bees6[0].style="transform:translate(1000px,250px)";
     bees6[1].style="transform:translate(1000px,250px)";
    },1300)
},4500)

//  For BEES 7
setTimeout(()=>{
    beehivePiece[0].style="transform:translate(0px,0px)";
    bees7[0].style="transform:translate(0px,0px)";
    bees7[1].style="transform:translate(0px,0px)";
    setTimeout(()=>{
     bees7[0].style="transform:translate(1000px,250px)";
     bees7[1].style="transform:translate(1000px,250px)";
    },1300)
},5000)

 setTimeout(()=>{
     gatekeeperBee.style="transform:translate(0px,0px);"
        beehiveGate.style="transform:translate(0px,0px);"
      setTimeout(() => {
        gatekeeperBee.style="transform:translate(1000px,250px)";
        
    }, 2500);
 },6000)


}

// let a = document.querySelector("#beehive-gate");

//console.log(gatekeeperBee.getBBox())

提前致谢

【问题讨论】：

    标签： html css


    【解决方案1】：

    我发现了导致问题的两个问题。

    1. SVG 的宽度为 28em。请删除它。相反，使用 % 值。由于 em，浏览器会将您的 SVG 放在容器框之外。

    2. 包裹在“ul”中的标题导航项目显示为 flex，其方向始终为行。因此，一旦容器的宽度减小，它们就会重叠。您可以使用 flex-direction 列对较小的设备进行排序。

    let beehivePiece = document.querySelectorAll(".beehive-piece");
let bees1 = document.querySelectorAll(".corr-p-1");
let bees2 = document.querySelectorAll(".corr-p-2");
let bees3 = document.querySelectorAll(".corr-p-3");
let bees4 = document.querySelectorAll(".corr-p-4");
let bees5 = document.querySelectorAll(".corr-p-5");
let bees6 = document.querySelectorAll(".corr-p-6");
let bees7 = document.querySelectorAll(".corr-p-7");
let beehiveGate = document.querySelector("#beehive-gate");
let gatekeeperBee = document.querySelector(".gate-keeper-bee");




// console.log(gatekeeperBee)


// console.log(beehivePiece[1])

let a = 1500

window.addEventListener("load",check)
function check(){
   setTimeout(()=>{
       beehivePiece[6].style="transform:translate(0px,0px)";
       bees1[0].style="transform:translate(0px,0px)";
       bees1[1].style="transform:translate(0px,0px)";
       setTimeout(()=>{
        bees1[0].style="transform:translate(1000px,250px)";
        bees1[1].style="transform:translate(1000px,250px)";
       },1300)
   },1500)

//  For BEES 2
   setTimeout(()=>{
    beehivePiece[5].style="transform:translate(0px,0px)";
    bees2[0].style="transform:translate(0px,0px)";
    bees2[1].style="transform:translate(0px,0px)";
    setTimeout(()=>{
     bees2[0].style="transform:translate(1000px,250px)";
     bees2[1].style="transform:translate(1000px,250px)";
    },1300)
},2500)

//  For BEES 3
setTimeout(()=>{
    beehivePiece[4].style="transform:translate(0px,0px)";
    bees3[0].style="transform:translate(0px,0px)";
    bees3[1].style="transform:translate(0px,0px)";
    setTimeout(()=>{
     bees3[0].style="transform:translate(1000px,250px)";
     bees3[1].style="transform:translate(1000px,250px)";
    },1300)
},3000)

//  For BEES 4
setTimeout(()=>{
    beehivePiece[3].style="transform:translate(0px,0px)";
    bees4[0].style="transform:translate(0px,0px)";
    bees4[1].style="transform:translate(0px,0px)";
    setTimeout(()=>{
     bees4[0].style="transform:translate(1000px,250px)";
     bees4[1].style="transform:translate(1000px,250px)";
    },1300)
},3500)

//  For BEES 5
setTimeout(()=>{
    beehivePiece[2].style="transform:translate(0px,0px)";
    bees5[0].style="transform:translate(0px,0px)";
    bees5[1].style="transform:translate(0px,0px)";
    setTimeout(()=>{
     bees5[0].style="transform:translate(1000px,250px)";
     bees5[1].style="transform:translate(1000px,250px)";
    },1300)
},4000)


//  For BEES 6
setTimeout(()=>{
    beehivePiece[1].style="transform:translate(0px,0px)";
    bees6[0].style="transform:translate(0px,0px)";
    bees6[1].style="transform:translate(0px,0px)";
    setTimeout(()=>{
     bees6[0].style="transform:translate(1000px,250px)";
     bees6[1].style="transform:translate(1000px,250px)";
    },1300)
},4500)

//  For BEES 7
setTimeout(()=>{
    beehivePiece[0].style="transform:translate(0px,0px)";
    bees7[0].style="transform:translate(0px,0px)";
    bees7[1].style="transform:translate(0px,0px)";
    setTimeout(()=>{
     bees7[0].style="transform:translate(1000px,250px)";
     bees7[1].style="transform:translate(1000px,250px)";
    },1300)
},5000)

 setTimeout(()=>{
     gatekeeperBee.style="transform:translate(0px,0px);"
        beehiveGate.style="transform:translate(0px,0px);"
      setTimeout(() => {
        gatekeeperBee.style="transform:translate(1000px,250px)";
        
    }, 2500);
 },6000)


}

// let a = document.querySelector("#beehive-gate");

//console.log(gatekeeperBee.getBBox())
    /* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'); */

        html {
            border: 5px solid blue;
        }

        *,
        ::before,
        ::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Roboto;
            /* border: 3px solid red; */
            /* No need of giving position absolute to the body/*
            }

        .container {
            border: 2px solid black;
            /* padding:10px; */
            width: 100%;
        }

        .header {
            /* border:2px solid rgb(255, 179, 0); */
            width: 100%;
            padding: .5em .5em;
        }

        .header-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: .8em 0em;
            /* border:2px solid blue; */
            width: 90%;
            margin: auto;
        }

        .site-title {
            /* border: 2px solid red; */
            margin-left: 2em;
            font-size: 2.3em;
            font-weight: 400;


        }

        .site-title-span {
            font-weight: 750;
            color: #E47700;
        }

        .nav {
            /* border:2px solid magenta; */
            margin-right: 2em;
            /* align-self: flex-end; */
            width: 45%;
        }

        .nav ul {
            display: flex;
            list-style: none;
            font-size: 1.5em;
            justify-content: space-between;
        }

        /* .nav ul li{
          margin-right:1.5em;
        } */
        .nav ul li a {
            text-decoration: none;
            color: black;
            font-weight: 500;
            padding: 6px;
        }

        .nav ul li a:hover {
            color: white;
            background: #FEBD33;
            border-radius: 50px;
            transition: .3s all ease;
        }

        /* GO AND DO IT IN JS */
        .active {
            border-radius: 50px;
            background-color: #FEBD33;
            color: white;
            padding: 0 12px;
        }

        .hero {
            /* border:2px solid red; */
             height: 100%; /* Changing to 100% will give everything inside your container you can adjust the height according to your requirements */
            font-family: poppins;
            /* overflow: hidden; */


        }

        .hero-wrapper {
            /* border: 2px solid hotpink; */
            width: 80%;
            margin: 0 auto;
            margin-top: 130px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;


        }

        .site-info {
            /* position: relative;
                top: 155px;
                left: 10.9em; */
            display: inline-block;
            width: 100%;
            line-height: 28px;
            /* border: 2px solid rebeccapurple; */
        }

        .site-info-heading {
            font-size: 3em;
            /* border: 2px solid rebeccapurple; */

        }

        .site-info-text {
            font-size: 25px;
            font-weight: 600;
            margin-top: 6px;
            /* border: 2px solid rebeccapurple; */

        }

        .site-info-btn {
            font-size: 1.3em;
            border-radius: 50px;
            padding: .3em .5em;
            border: none;
            background-color: #33BC00;
            color: white;
            margin-top: 19px;
            /* border: 2px solid rebeccapurple; */

        }

        .hero-beehive {
            position: relative;
            top: 0px;
            left: 0px;
            /* right: 1em;  */
            /* display:inline-block; */
            width: 300px;
            height: 300px;
            /* border: 2px solid rebeccapurple; */


        }

        svg {
            /* border:2px solid red; */
            width: 100%;
            height: auto;
            float: left;
            /* margin-left:0; */
            /* display:inline-block; */
            position: static;
            top: 0px;
            left: 0;
            /* overflow: hidden; */

            /* float: right; */

        }

        #b-peice-1,
        #b-peice-2,
        #b-peice-3 #b-peice-4,
        #b-peice-5,
        #b-peice-6,
        #b-peice-7 {
            transform: translateY(px);
            position: absolute;
        }

        .beehive-piece,
        .bee {
            transition: .7s;

        }

        .gate-keeper-bee,
        #beehive-gate {
            transition: 2s;

        }

        .forest {
            border: 2px solid red;
            width: 100%;
        }

        /* HONEY BEE WINGS FLYING ANIM */
        #small-wing {
            /* anim`ation: small-wing 2s infinite alternate ; */
            animation: check .09s infinite alternate;
            /* animation-name: check;
             animation-duration: 1s;
             animation-iteration-count: infinite; */
            /* transform: rotate(10deg); */

        }

        #large-wing {
            animation: check .09s infinite alternate;

        }

        @keyframes check {
            0% {
                transform: rotate(0deg);
            }

            50% {
                transform: rotate(-.4deg);

            }

            100% {
                transform: rotate(.4deg);

            }
        }

        .small-wing {
            /* anim`ation: small-wing 2s infinite alternate ; */
            animation: check .09s infinite alternate;
            /* animation-name: check;
             animation-duration: 1s;
             animation-iteration-count: infinite; */
            /* transform: rotate(10deg); */
            transform-origin: center;

        }

        .large-wing {
            animation: check .09s infinite alternate;
            transform-origin: center;

        }

        @keyframes check {
            0% {
                transform: rotate(0deg);
            }

            50% {
                transform: rotate(-2.5deg);
                transform-origin: center;


            }

            100% {
                transform: rotate(2.5deg);

            }

        }
        
        @media only screen and (max-width: 767px){
        .nav ul{
        flex-direction: column;
        }
        }
    <div class="container">

        <div class="header">
            <!--header open-->
            <div class="header-wrapper">
                <div class="site-title">
                    <p>

                        <span class="site-title-span">B</span>ee
                        <span class="site-title-span">B</span>uzz
                    </p>
                </div>

                <div class="nav">
                    <ul>
                        <li><a href="#" class="active">HOME</a></li>
                        <li><a href="#">SERVICES</a></li>
                        <li><a href="#">CONTACT</a></li>
                        <li><a href="#">ABOUT</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--header closed-->


        <!-- HERO SECTION  -->
        <div class="hero">
            <div class="hero-wrapper">

                <div class="site-info">
                    <h1 class="site-info-heading">
                        <span style="color:#E47700;font-weight:bolder;">B</span>ee
                        <span style="color:#E47700;font-weight:bolder;">B</span>uzz
                        <span style="font-size:.5em;">TM</span>
                    </h1>
                    <p class="site-info-text">
                        We are providing pure
                        forest bee honey and
                        protecting our environment
                    </p>
                    <button class="site-info-btn">
                        Read more
                    </button>
                </div>

                <div class="hero-beehive">

                    <svg viewBox="0 50 630 630" fill="none" xmlns="http://www.w3.org/2000/svg">


                        <symbol id="theBee" viewBox="0 0 78 49">
                            <g id="complete_bee">
                                <path id="bee head"
                                    d="M11.553 35.5047C16.3904 38.8245 21.8681 37.8364 24.0023 36.4532V15.1115C22.9352 14.4397 19.5917 13.499 14.7542 15.1115C9.9168 16.724 8.37329 20.5655 7.99604 21.7512C6.88944 25.2291 6.71554 32.1848 11.553 35.5047Z"
                                    fill="#FFE818" stroke="black" />
                                <circle id="bee eye" cx="15.532" cy="21.6908" r="2.96412" fill="#313131" />
                                <path id="bee trunk"
                                    d="M65.8034 15.1697C45.3154 7.5816 30.1154 12.008 23.9501 15.1697V36.6299C37.3242 43.649 56.6739 38.0527 64.1435 34.3772C78.0156 27.5513 77.7785 19.6049 65.8034 15.1697Z"
                                    fill="#FFE818" stroke="black" />
                                <path id="trunk lines"
                                    d="M32.961 12.087C30.4711 16.1577 26.9142 26.5519 32.3682 39.3569L35.8065 39.8312C29.8309 27.5004 34.2652 15.5649 36.7551 11.4942L32.961 12.087Z"
                                    fill="#4E4E4E" stroke="black" />
                                <path id="trunk lines_2"
                                    d="M42.9204 39.8312C36.9447 27.5005 41.2605 15.0907 43.7503 11.02L47.7815 11.1385C45.2917 15.2092 40.5017 27.1448 46.4773 39.4755L42.9204 39.8312Z"
                                    fill="#313131" stroke="black" />
                                <path id="trunk lines_3"
                                    d="M53.947 38.0527C47.2667 27.313 51.8749 15.6325 54.6584 12.087L58.3339 12.7984C55.5504 16.3439 50.8236 26.246 57.504 36.9856L53.947 38.0527Z"
                                    fill="#313131" stroke="black" />
                                <path id="trunk lines_4"
                                    d="M63.7528 34.6143C56.6849 26.8661 61.298 16.5925 64.38 14.6955L67.5819 15.8811C65.3292 18.6081 61.4051 23.9435 66.3963 33.1916L63.7528 34.6143Z"
                                    fill="#313131" stroke="black" />

                                <path id="small-wing"
                                    d="M61.4166 1.06052C55.8203 0.206853 39.1659 8.60919 32.6053 12.0871C54.3264 11.3283 59.9938 9.00435 61.4166 8.05583C63.2303 6.8467 67.0128 1.91419 61.4166 1.06052Z"
                                    fill="#99CEFF" stroke="black" />

                                <path id="large-wing"
                                    d="M32.9609 11.9685C48.0977 7.26541 80.3166 -2.14073 74.6957 7.34446C68.7675 14.5769 44.3036 13.6679 32.9609 11.9685Z"
                                    fill="#81D1FE" stroke="black" />
                                <path id="bee sting" d="M70.4275 30.7017L73.273 27.7376L76 32.7173L70.4275 30.7017Z"
                                    fill="#313131" stroke="black" />

                                <path id="antenna"
                                    d="M13.1606 15.8811C13.4768 12.6008 12.1173 5.73197 4.14972 4.4989M10.3151 17.8967C9.36656 14.4583 6.09418 8.05584 0.592773 9.95288"
                                    stroke="black" />
                                <path id="bee legs"
                                    d="M30.3525 39.1198L26.2028 43.151L28.2184 46.2337M35.6879 39.9497L31.7753 44.5738L34.2652 48.605"
                                    stroke="black" />
                                <circle id="antenna ball" cx="4.38689" cy="4.38033" r="0.592824" fill="#FFE818" />
                                <circle id="antenna ball_2" cx="0.592824" cy="9.83431" r="0.592824" fill="#FFE818" />
                                <path id="bee behind legs"
                                    d="M49.2044 39.2384L45.6475 43.6253L47.6631 45.9965M55.4883 37.8156L50.8643 43.6253L55.4883 46.8265"
                                    stroke="black" />
                            </g>
                        </symbol>



                        <g id="beehive 1">
                            <g id="first-beehive-setm">

                                <path id="hive-stem"
                                    d="M353 80C361.284 80 368 86.7157 368 95V97C368 105.284 361.284 112 353 112H15C6.71573 112 0 105.284 0 97V95C0 86.7157 6.71573 80 15 80H217.787C221.765 80 225.58 78.4196 228.393 75.6066L261.393 42.6066C267.251 36.7487 276.749 36.7487 282.607 42.6066L288.971 48.9706C292.853 52.8528 292.853 59.1472 288.971 63.0294C282.708 69.292 287.143 80 296 80H353Z"
                                    fill="#502601" />
                                <path id="leaft-up"
                                    d="M368 0L375.032 7.032C385.896 17.898 392 32.634 392 48C392 63.366 385.896 78.102 375.032 88.968L368 96L360.968 88.968C350.104 78.102 344 63.366 344 48C344 32.634 350.104 17.898 360.968 7.032L368 0Z"
                                    fill="#008100" />
                                <path id="leaf-side"
                                    d="M464 96L456.968 103.032C446.102 113.896 431.366 120 416 120C400.634 120 385.898 113.896 375.032 103.032L368 96L375.032 88.968C385.898 78.104 400.634 72 416 72C431.366 72 446.102 78.104 456.968 88.968L464 96Z"
                                    fill="#33BC00" />
                                <path id="anchor" d="M152 112H184V160H152V112Z" fill="#763A02" />
                            </g>4
                            <g>
                                <!-- beehive piece -->
                                <path id="b-peice-7" class="beehive-piece" style="transform: translate(1000px,250px);"
                                    d="M112 432H232C240.837 432 248 439.163 248 448C248 456.837 240.837 464 232 464H112C103.163 464 96 456.837 96 448C96 439.163 103.163 432 112 432Z"
                                    fill="#E47700" />
                                <!-- beehive piece -->
                                <path id="b-peice-6" class="beehive-piece" style="transform: translate(1000px,250px);"
                                    d="M72 384H272C285.255 384 296 394.745 296 408C296 421.255 285.255 432 272 432H72C58.745 432 48 421.255 48 408C48 394.745 58.745 384 72 384Z"
                                    fill="#FF8800" />
                                <!-- beehive piece -->
                                <path id="b-peice-5" class="beehive-piece" style="transform: translate(1000px,250px);"
                                    d="M40 336C143.098 336 200.902 336 304 336C317.255 336 328 346.745 328 360C328 373.255 317.255 384 304 384H40C26.745 384 16 373.255 16 360C16 346.745 26.745 336 40 336Z"
                                    fill="#FFA900" />
                                <!-- beehive piece 4 -->
                                <path id="b-peice-4" class="beehive-piece" style="transform: translate(1000px,250px);"
                                    d="M24 288H320C333.255 288 344 298.745 344 312C344 325.255 333.255 336 320 336H24C10.745 336 0 325.255 0 312C0 298.745 10.745 288 24 288Z"
                                    fill="#FEBD33" />

                                <!-- beehive piece 3 -->
                                <path id="b-peice-3" class="beehive-piece" style="transform: translate(1000px,250px);"
                                    d="M40 240H304C317.255 240 328 250.745 328 264C328 277.255 317.255 288 304 288H40C26.745 288 16 277.255 16 264C16 250.745 26.745 240 40 240Z"
                                    fill="#FFA900" />

                                <!-- beehive piece 2 -->
                                <path id="b-peice-2" style="transform: translate(1000px,250px);" class="beehive-piece"
                                    d="M72 192H272C285.255 192 296 202.745 296 216C296 229.255 285.255 240 272 240H72C58.745 240 48 229.255 48 216C48 202.745 58.745 192 72 192Z"
                                    fill="#FF8800" />

                                <!-- beehive piece 1 -->
                                <path id="b-peice-1" class="beehive-piece" style="transform: translate(1000px,250px);"
                                    d="M112 160H232C240.837 160 248 167.163 248 176C248 184.837 240.837 192 232 192H112C103.163 192 96 184.837 96 176C96 167.163 103.163 160 112 160Z"
                                    fill="#E47700" />


                                <!-- beehive keeper -->
                                <path id="beehive-gate" style="transform: translate(1000px,250px);"
                                    d="M136 384H200V352C200 334.327 185.673 320 168 320C150.327 320 136 334.327 136 352V384Z"
                                    fill="#763A02" />
                            </g>



                            <!-- <use xlink:href="#theBee" width="62.4" height="38.4"/> -->
                            <!-- <use xlink:href="#theBee" width="62.4" height="38.4" x="344" y="288" /> -->

                            <!-- corresponding piece-1  -->
                            <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-1 bee"
                                width="62.4" height="38.4" x="80" y="155" />
                            <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-1 bee"
                                width="62.4" height="38.4" x="220" y="155" />


                            <!-- corresponding piece-2  -->
                            <use xlink:href="#theBee" style="transform: translate(1000px,250px);" width="62.4"
                                height="38.4" class="corr-p-2 bee" x="25" y="195" />
                            <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-2 bee"
                                width="62.4" height="38.4" x="260" y="195" />


                            <!-- corresponding piece-3  -->
                            <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-3 bee"
                                width="62.4" height="38.4" x="-6" y="245" />
                            <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-3 bee"
                                width="62.4" height="38.4" x="290" y="245" />

                            <!-- corresponding piece-4  -->
                            <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-4 bee"
                                width="400" height="38.4" x="145" y="295" />
                            <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-4 bee"
                                width="400" height="38.4" x="-200" y="295" />

                            <!-- corresponding piece-5  -->
                            <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-5 bee"
                                width="400" height="38.4" x="135" y="345" />
                            <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-5 bee"
                                width="400" height="38.4" x="-180" y="345" />

                            <!-- corresponding piece-6  -->
                            <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-6 bee"
                                width="400" height="38.4" x="100" y="390" />
                            <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-6 bee"
                                width="400" height="38.4" x="-150" y="390" />

                            <!-- corresponding piece-7  -->
                            <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-7 bee"
                                width="400" height="38.4" x="50" y="435" />
                            <use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-7 bee"
                                width="400" height="38.4" x="-100" y="435" />

                            <!-- gate keeper bee -->
                            <use xlink:href="#theBee" class="gate-keeper-bee"
                                style="transform: translate(1000px,250px);" width="400" height="38.4" x="-30" y="290" />

                    </svg>

                </div>






            </div>

        </div>

        <div class="forest-container">
            <!--<img src="https://www.flaticon.com/svg/vstatic/svg/2913/2913520.svg?token=exp=1620194205~hmac=2a585b989b5d37a28d48adca1d210aeb" style="width:100%;"
             class="forest" alt="forest-vector">-->

        </div>
        <!--END OF THE CONTAINER-->
    </div>

    .

    【讨论】：

    • 非常感谢您的回答，我还有另一个问题非常小，但仍未得到解答 stackoverflow.com/questions/67396750/… 如果这些问题对社区有帮助，您可以投票支持，因为我最近从问题禁令中恢复过来它会帮助我。再次感谢！
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-12-15
    • 1970-01-01
    • 2023-03-03
    • 2015-12-20
    • 1970-01-01
    • 1970-01-01
    • 2017-12-09
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode