使閃屏重疊元素-有解無憂

我試圖讓我的啟影片面與網站重疊。

初始螢屏被我想要在背景上的元素推開。

www.rabbadz.com在底部顯示我的啟影片面。

這是我的 HTML

<!DOCTYPE html>

視窗.OneSignal = 視窗.OneSignal || []; OneSignal.push(function() { OneSignal.init({ appId: "355bfb40-16e9-48aa-93c3-d9eb93775989", }); }); 拉巴茲

    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600&amp;subset=latin-ext" rel="stylesheet">

    <!-- CSS -->
    <link href="assets/css/main.css" rel="stylesheet">

    <!-- JS -->
    <script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>
    <script src="assets/js/vendor/jquery-1.12.0.min.js"></script>

    <script src="assets/js/plugins/animate-headline.js"></script>
    <script src="assets/js/main.js"></script>


</head>
<body>
    
    <audio id="myAudio">
        <source src="assets/sound.mp3" type="audio/mpeg">
    </audio>
    
       <!--logo-->
    <img src="assets/images/logo.png" class="logo">

                        <!-- Options headline effects: .rotate | .slide | .zoom | .push | .clip -->
                           <div class="hero-section hero-section--color clearfix zoom">

            <!--we are rabbadz-->
                                <div class="anitext">
                                            <div class="title-01 title-01--11 text-center">
                                                <h2 class="title__heading">
                                                    <div class="hero-section__words text-center">
                                                        <div class="title__effect is-visible">WE ARE RABBITS</div>
                                                        <div class="title__effect">WE ARE BADASS</div>
                                                        <div class="title__effect">WE ARE RABBADZ</div>
                                                    </div>
                                                </h2>
                                                <div class="title__description">Coming soon to the metaverse.</div>
            
                                                <!-- Options btn color: .btn-success | .btn-info | .btn-warning | .btn-danger | .btn-primary -->
                                                <div class="title__action"><a href="https://mint.rabbadz.com" class="btn btn-primary">MINT</a></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
            
    
      <!--Particles-->

    <div 
        id="particles-js"></div>
    
    <script src="assets/js/particles.js"></script>
    <script src="assets/js/app.js"></script> 

    <!-- splashscreen-->
    <div class="scene content-hidden scene">
        <div class="scene">
            <div class="moon"></div>
        </div>

        <script type="text/javascript">
            function stars(){
                let count = 500;
                let scene = document.querySelector('.scene');
                let i = 0;
                while(i < count){
                    let star = document.createElement("i");
                    let x = Math.floor(Math.random() * window.innerWidth);
                    let y = Math.floor(Math.random() * window.innerHeight);

                    let duration = Math.random() * 10;
                    let size = Math.random() * 2;

                    star.style.left = x 'px';
                    star.style.top = y 'px';
                    star.style.width = 1 size 'px';
                    star.style.height = 1 size 'px';

                    star.style.animationDuration = 5 duration 's';
                    star.style.animationDelay = duration 's';
                    scene.appendChild(star);
                   
                    i  

                }
            }
            stars();


        </script>

    <!--Rabbadverse button-->

$(function() { var scene = $('.scene'), enterButton = scene.find('.knop'); setTimeout(function() { scene.removeClass('content-hidden'); }, 500) ; enterButton.on('click', function(e) { e.preventDefault(); scene.addClass('content-hidden').fadeOut(); });

                var anitext = $('.forest'),
                    enterButton = scene.find('.knop');

                    setTimeout(function() {
                    forest.removeClass('content-hidden');
                }, 500);

                enterButton.on('click', function(e) {
                    e.preventDefault();
                    forest.addClass('content-hidden').fadeOut();
                });
                
                
            });
            
            
            
        </script>

var x = document.getElementById("myAudio"); 函式 playAudio() { x.play(); } 功能 pauseAudio() { x.pause(); }

</body>

uj5u.com熱心網友回復：

如果我理解正確，您希望您的“場景” div 位于黑色背景 div 之上。

你可以通過這個簡單的 css 來實作：

.scene {
  position: fixed; /* make it relative to the viewport */
  inset: 0; /* make the div close to the edge of the relative element, here the viewport, so it takes the full screen */
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/478801.html

標籤：javascript html css 屏幕闪屏

上一篇：如何使用css在行中設定三個具有相同寬度33.3%的專案？Flex或Grid（沒關系）

下一篇：如何在html檔案中使用行內css檔案的代碼