Question

我在codepen.io（http://codepen.io/GjoreMilevski/full/XdoagK/）上传了以下代码：

<body>
<span id="main-logo"><a href=#home><img src='http://hnmag.ca/wp-content/uploads/2016/04/hand-155662_640.png'></a>
        </span>
<div id="nav-container">
    <nav>
        <ul>
            <li><a href="#about" class="nav-link">About</a></li>
            <li><a href="#portfolio" class="nav-link">Portfolio</a></li>
            <li><a href="#contact" class="nav-link">Contact</a></li>
        </ul>
    </nav>
</div>

<section id="main">
    <article class="panel" id="home"></article>
    <article class="panel" id="about"></article>
    <article class="panel" id="portfolio"></article>
    <article class="panel" id="contact"></article>
</section>

</body>

SCSS：

＆＃13;

// VARIABLES

$default-nav: #FFD2AA;
$light-orange: #D49C6A;
$darker-orange: #804715;
$darkside-orange: #552800;

$cool-font: 'Fjalla One', sans-serif;

// STYLES

html, body {
    height: 100%;
    width: 100%;
}

body {
    margin: 0;
}

// NAV STYLES

#nav-container {
    position: fixed;
    height: 100%;
    width: 190px;
    background-color: aliceblue;
    z-index: 10;
    box-shadow: 1px 0 15px black;
}
    
nav {
        position: relative;
        width: 100%;
        height: 100%;
        top: 50%;
        text-transform: uppercase;
        text-decoration: none;
    }
        
ul {
        list-style-type: none;
        height: 100%;
        padding: 0;
        text-align: center;
        }
        
li:nth-child(1) {
        background-color: $light-orange;
        }
        
li:nth-child(2) {
        background-color: $darker-orange;
        }
        
li:nth-child(3) {
        background-color: $darkside-orange;
        }
        
li {
        height: 16.6%;
        width: 100%;
        position: relative;
        }

.nav-link {
        text-decoration: none;
        color: aliceblue;
        font-size: 1.5em;
        font-family: $cool-font;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -25%);
}

a:nth-child(1):hover {
    color: #E6BA4E;
}

// LOGO 

#main-logo img {
    position: fixed;
    z-index: 999;
    top: 20%;
    left: 95px;
    transform: translate(-47px);
    max-width: 100px;
    max-height: 100%;
}

// SECTIONS STYLING

.panel {
    height: 100vh;
}

#home {
    background-color: aliceblue;
}

#about {
    background-color: $light-orange;
}

#portfolio {
    background-color: $darker-orange;
}

#contact {
    background-color: $darkside-orange;
}

＆＃13;

它是固定的垂直导航栏，带有徽标和三个导航链接。每个链接都是一个href＆＃39; -ed到右边的部分面板。每块面板的高度均为100vh。

而不是立即跳转到＆＃39;单击链接时，我想制作一个过渡/动画，使滚动到面板更加平滑和慢。我的目标是只使用CSS3，而不使用jquery。

纯CSS3滚动到部分的过渡

0 个答案: