炫酷左右开门效果

一款 炫酷左右开门效果 部分代码如下

 <script>

        document.addEventListener('DOMContentLoaded', function() {

            const doors = document.querySelector('.doors');

            const clickArea = document.querySelector('.click-area');

            const welcomeContent = document.querySelector('.welcome-content');

            

            clickArea.addEventListener('click', function() {

                // 添加打开类以触发动画

                doors.classList.add('open');

                

                // 动画结束后显示欢迎内容

                setTimeout(function() {

                    welcomeContent.classList.remove('hidden');

                    // 添加show类以触发淡入效果

                    setTimeout(function() {

                        welcomeContent.classList.add('show');

                    }, 50);

                }, 1200);

            });

        });

    </script>

演示代码：https://bgm.pw/assets/file/zp/20251107232231.html