制作闪屏重叠元素

Question

我正在尝试让启动画面与网站重叠。

启动画面被我想要的背景元素推开。

这是我的 HTML

<!DOCTYPE html>

window.OneSignal = window.OneSignal || []; OneSignal.push(函数() { OneSignal.init({ 应用程序 ID：“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-->

$(函数() { var scene = $('.scene'), enterButton = scene.find('.knop'); 设置超时（功能（）{ scene.removeClass('content-hidden'); }, 500); enterButton.on('click', 函数(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"); 功能播放音频（）{ x.play(); } 功能暂停音频（）{ x.pause(); }

</body>

Answer 1

如果我没理解错的话，你想要你的“场景”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 */
}

制作闪屏重叠元素

Make splashscreen overlap elements

html

javascript

css

screen

splash-screen