当前位置： 文江博客话题详情

编译 Pug 和 scss，未按预期运行

发布于 2025-01-11 14:49:40 字数 8616 浏览 0 评论 0原文

我正在开发我的网站的一部分，一个包含图像的启动屏幕。我正在尝试在加载图像上创建 此 效果。我确实使用内置编译器将 pug 转换为 html，但我的观点没有按预期工作，我不确定我哪里出错了。

预期输出：

“预期输出”

我设法刮出的内容：

错误输出

Html 代码：

<!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="css/index.css" type="text/css">
    <link rel="icon" type="image/png" sizes="32x32" href="/media/faviconMedia/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/media/faviconMedia/favicon-16x16.png">
    <link rel="shortcut icon" type="image/png" sizes="32x32" href="/media/faviconMedia/favicon-32x32.png">
    <link rel="shortcut icon" type="image/png" sizes="16x16" href="/media/faviconMedia/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/media/faviconMedia/apple-touch-icon.png">
    <link rel="manifest" href="/media/faviconMedia/site.webmanifest">
    <title>Document</title>
</head>
<body>
    <div class="splash">
        <div class="fade-in">
            <div class="persp assembly" style="--dx: 0">
                <div class="panel" style="--i: 0; --k: 0.25; --p: 0; --dx: 0; --dz: -0.2"></div>
                <div class="panel" style="--i: 1; --k: 0.5; --p: 0.25; --dx: -0.1; --dz: 0"></div>
                <div class="panel" style="--i: 2; --k: 0.25; --p: 0.75; --dx: 0; --dz: 0"></div>
              </div>
        </div>
    </div>
    <div class="container" data-0="transform:translateX(0%);" data-1000="transform:translateX(-200%);">
        <div class="navbar">
            <nav>
                <img src="media/2020-02-29.jpg" class="Logo">
                <ul>
                    <li><a onclick="window.scrollBy({top:0,left:0,behavior:'smooth'});">About Me</a></li>
                    <li><a onclick="window.scrollBy({top:500,left:0,behavior:'smooth'});">Yeah</a></li>
                    <li><a onclick="window.scrollBy({top:1000,left:0,behavior:'smooth'});">LGTM</a></li>
                </ul>
            </nav>
        </div>
        <section>
            <div class="content">
                <h1>1</h1>
                <p>
                    Page 1
                </p>
            </div>
        </section>
        <section>
            <div class="content">
                <h1>2</h1>
                <p>
                    Page 2
                </p>
            </div>
        </section>
        <section id="3">
            <div class="content">
                <h1>3</h1>
                <p>
                    Page 3
                </p>
            </div>
        </section>
    </div>
    <script type="text/javascript" src="js/ScrollX.js"></script>
    <script type="text/javascript">
     var s = skrollr.init();
    </script>
    <script type="text/javascript" src="js/SplashScreen.js"></script>
</body>
</html>

Scss 文件：

$url: 'https://c4.wallpaperflare.com/wallpaper/321/642/544/space-galaxy-stars-andromeda-wallpaper-preview.jpg';
$w: 85vmin;
$h: 65vmin;
$f: .25;

body{
    height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Candara;

    .splash{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #000;
        z-index: 200;
        color: aliceblue;
        text-align: center;
        line-height: 100vh;
    }

    .splash.display-none{
        position: fixed;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #000;
        z-index: -10;
        color: aliceblue;
        text-align: center;
        line-height: 100vh;
        transition: all 2.5s;
    }
    
    .persp{
        position: absolute;
        transform-style: preserve-3d;
    }
    
    .assembly {
        top: 50%; left: calc(50% - .5*var(--dx)*#{$w});
        transform: rotatey(35deg)
    }
    
    .panel {
        --mid: calc((var(--p) + var(--k)*#{$f})*#{$w});
        transform: translate3d(calc(var(--dx)*#{$w}), 0, calc(var(--dz)*#{$w}));
        
        &:before, &:after {
            position: absolute;
            margin: -.5*$h (-.5*$w);
            width: $w; height: $h;
            background: url($url) 50%/ cover;
            content: ''
        }
        
        &:before {
            transform-origin: var(--mid);
            transform: rotatey(-90deg);
            clip-path: inset(0 calc(100% - var(--mid)) 0 calc(var(--p)*100%));
            filter: brightness(.4)
        }
        
        &:after {
            clip-path: inset(0 calc(100% - (var(--p) + var(--k))*#{$w}) 0 var(--mid))
        }
    }

    .fade-in{
        opacity: 0;
        animation: fadeIn 1s ease-in forwards;
    }

    .navbar{
        margin: 0;
        overflow: hidden;
        width: 100%;
        top: 0;
        position: fixed;
    }

    nav{
        background: black;
        display: flex;
        width: 100%;
        align-items: center;
        flex-wrap: wrap;

        .Logo{
            width: 55px;
            cursor: pointer;
        }
        
        ul{
            flex: 1;
            text-align: right;
            padding-right: 20px;

            li{
                display: inline-block;
                list-style: none;
                margin: 10px;

                a{
                    color: aliceblue;
                    text-decoration: none;
                    position: relative;

                    &:hover::after{
                        width: 50%;
                    }

                    &::after{
                        content: '';
                        width: 0;
                        height: 3px;
                        position: absolute;
                        bottom: -5px;
                        left: 50%;
                        transform: translateX(-50%);
                        background: aliceblue;
                        transition: width 0.3s;
                    }
                }
            }
        }
    }

    .container{
        width: 100%;
        height: 100%;
        display: flex;
        position: fixed;
        top: 0;
        left: 0;

        section{
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 100%;
            height: 100vh;
            scroll-margin: 100px;

            &:nth-of-type(1){
                background-color: rgb(255, 152, 152);
                color: aliceblue;
            }

            &:nth-of-type(2){
                background-color: rgb(27, 54, 54);
                color: aliceblue;
            }

            &:nth-of-type(3){
                background-color: rgb(12, 39, 39);
                color: aliceblue;
            }

            .content{
                max-width: 800px;
                padding: 40px;
                text-align: center;

                h1{
                    font-size: 4em;
                }

                p{
                    font-size: 1.3em;
                    line-height: 1.4em;
                }
            }
        }
    }

    @media (max-width: 991px) {
        .container{
            position: absolute;
            display: flex;
            flex-direction: column;
            height: auto;
            transform: none !important;
        }
    }

    @keyframes fadeIn {
        to{
            opacity: 1;
        }
    }
}

Splashscreen.js：

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

document.addEventListener('DOMContentLoaded', (e)=>{
    setTimeout(()=>{
        splash.classList.add('display-none');
    }, 2250);
})
原文

I am working on a portion of my website, a splash screen that has image in it. I am trying to create this effect on the loading image. I did use the inbuilt compiler to convert the pug to html, but my perspective is not working as expected, I am not sure where I went wrong.

Expected output:

Expected output

What I managed to scrape out:

Incorrect output

Html code:

<!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="css/index.css" type="text/css">
    <link rel="icon" type="image/png" sizes="32x32" href="/media/faviconMedia/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/media/faviconMedia/favicon-16x16.png">
    <link rel="shortcut icon" type="image/png" sizes="32x32" href="/media/faviconMedia/favicon-32x32.png">
    <link rel="shortcut icon" type="image/png" sizes="16x16" href="/media/faviconMedia/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/media/faviconMedia/apple-touch-icon.png">
    <link rel="manifest" href="/media/faviconMedia/site.webmanifest">
    <title>Document</title>
</head>
<body>
    <div class="splash">
        <div class="fade-in">
            <div class="persp assembly" style="--dx: 0">
                <div class="panel" style="--i: 0; --k: 0.25; --p: 0; --dx: 0; --dz: -0.2"></div>
                <div class="panel" style="--i: 1; --k: 0.5; --p: 0.25; --dx: -0.1; --dz: 0"></div>
                <div class="panel" style="--i: 2; --k: 0.25; --p: 0.75; --dx: 0; --dz: 0"></div>
              </div>
        </div>
    </div>
    <div class="container" data-0="transform:translateX(0%);" data-1000="transform:translateX(-200%);">
        <div class="navbar">
            <nav>
                <img src="media/2020-02-29.jpg" class="Logo">
                <ul>
                    <li><a onclick="window.scrollBy({top:0,left:0,behavior:'smooth'});">About Me</a></li>
                    <li><a onclick="window.scrollBy({top:500,left:0,behavior:'smooth'});">Yeah</a></li>
                    <li><a onclick="window.scrollBy({top:1000,left:0,behavior:'smooth'});">LGTM</a></li>
                </ul>
            </nav>
        </div>
        <section>
            <div class="content">
                <h1>1</h1>
                <p>
                    Page 1
                </p>
            </div>
        </section>
        <section>
            <div class="content">
                <h1>2</h1>
                <p>
                    Page 2
                </p>
            </div>
        </section>
        <section id="3">
            <div class="content">
                <h1>3</h1>
                <p>
                    Page 3
                </p>
            </div>
        </section>
    </div>
    <script type="text/javascript" src="js/ScrollX.js"></script>
    <script type="text/javascript">
     var s = skrollr.init();
    </script>
    <script type="text/javascript" src="js/SplashScreen.js"></script>
</body>
</html>

Scss file:

$url: 'https://c4.wallpaperflare.com/wallpaper/321/642/544/space-galaxy-stars-andromeda-wallpaper-preview.jpg';
$w: 85vmin;
$h: 65vmin;
$f: .25;

body{
    height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Candara;

    .splash{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #000;
        z-index: 200;
        color: aliceblue;
        text-align: center;
        line-height: 100vh;
    }

    .splash.display-none{
        position: fixed;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #000;
        z-index: -10;
        color: aliceblue;
        text-align: center;
        line-height: 100vh;
        transition: all 2.5s;
    }
    
    .persp{
        position: absolute;
        transform-style: preserve-3d;
    }
    
    .assembly {
        top: 50%; left: calc(50% - .5*var(--dx)*#{$w});
        transform: rotatey(35deg)
    }
    
    .panel {
        --mid: calc((var(--p) + var(--k)*#{$f})*#{$w});
        transform: translate3d(calc(var(--dx)*#{$w}), 0, calc(var(--dz)*#{$w}));
        
        &:before, &:after {
            position: absolute;
            margin: -.5*$h (-.5*$w);
            width: $w; height: $h;
            background: url($url) 50%/ cover;
            content: ''
        }
        
        &:before {
            transform-origin: var(--mid);
            transform: rotatey(-90deg);
            clip-path: inset(0 calc(100% - var(--mid)) 0 calc(var(--p)*100%));
            filter: brightness(.4)
        }
        
        &:after {
            clip-path: inset(0 calc(100% - (var(--p) + var(--k))*#{$w}) 0 var(--mid))
        }
    }

    .fade-in{
        opacity: 0;
        animation: fadeIn 1s ease-in forwards;
    }

    .navbar{
        margin: 0;
        overflow: hidden;
        width: 100%;
        top: 0;
        position: fixed;
    }

    nav{
        background: black;
        display: flex;
        width: 100%;
        align-items: center;
        flex-wrap: wrap;

        .Logo{
            width: 55px;
            cursor: pointer;
        }
        
        ul{
            flex: 1;
            text-align: right;
            padding-right: 20px;

            li{
                display: inline-block;
                list-style: none;
                margin: 10px;

                a{
                    color: aliceblue;
                    text-decoration: none;
                    position: relative;

                    &:hover::after{
                        width: 50%;
                    }

                    &::after{
                        content: '';
                        width: 0;
                        height: 3px;
                        position: absolute;
                        bottom: -5px;
                        left: 50%;
                        transform: translateX(-50%);
                        background: aliceblue;
                        transition: width 0.3s;
                    }
                }
            }
        }
    }

    .container{
        width: 100%;
        height: 100%;
        display: flex;
        position: fixed;
        top: 0;
        left: 0;

        section{
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 100%;
            height: 100vh;
            scroll-margin: 100px;

            &:nth-of-type(1){
                background-color: rgb(255, 152, 152);
                color: aliceblue;
            }

            &:nth-of-type(2){
                background-color: rgb(27, 54, 54);
                color: aliceblue;
            }

            &:nth-of-type(3){
                background-color: rgb(12, 39, 39);
                color: aliceblue;
            }

            .content{
                max-width: 800px;
                padding: 40px;
                text-align: center;

                h1{
                    font-size: 4em;
                }

                p{
                    font-size: 1.3em;
                    line-height: 1.4em;
                }
            }
        }
    }

    @media (max-width: 991px) {
        .container{
            position: absolute;
            display: flex;
            flex-direction: column;
            height: auto;
            transform: none !important;
        }
    }

    @keyframes fadeIn {
        to{
            opacity: 1;
        }
    }
}

Splashscreen.js:

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

document.addEventListener('DOMContentLoaded', (e)=>{
    setTimeout(()=>{
        splash.classList.add('display-none');
    }, 2250);
})

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

再可℃爱ぅ一点好了

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

微信用户

文章 0 评论 0

小情绪

文章 0 评论 0

追我者格杀勿论

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

笨死的猪

文章 0 评论 0

彭明超

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文