如何創作按鈕被從紙上掀起的立體效果

效果預覽

線上示範

按下右側的“點選預覽”按鈕可以在目前頁面預覽，點選連結可以全屏預覽。

https://codepen.io/comehope/pen/KRbXGe

可互動視訊教程

此視訊是可以互動的，你可以随時暫停視訊，編輯視訊中的代碼。

請用 chrome, safari, edge 打開觀看。

https://scrimba.com/c/c3e8dCB

源代碼下載下傳

本地下載下傳

每日前端實戰系列的全部源代碼請從 github 下載下傳：

https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 dom，标準的導航版式：

<nav>
    <ul>
        <li>Home</li>
    </ul>
</nav>           

居中顯示：

html, body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(cadetblue, darkcyan);
}           

設定容器的樣式，把背景色聲明為變量：

nav {
    width: 300px;
    height: 300px;
    --bgcolor: lemonchiffon;
    background-color: var(--bgcolor);
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 30px 0;
    box-sizing: border-box;
}           

去掉清單符，讓菜單項居中顯示：

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}           

設定菜單項的文字樣式：

nav ul li {
    color: brown;
    font-size: 20px;
    font-family: sans-serif;
}           

為菜單項增加滑鼠劃過效果：

nav ul li {
    padding: 0.5em 1em;
    border-radius: 0.5em;
    transition: 0.5s ease-out;
}

nav ul li:hover {
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1),
                0 6px 6px rgba(0, 0, 0, 0.1),
                0 8px 8px rgba(0, 0, 0, 0.1),
                0 12px 12px rgba(0, 0, 0, 0.1);
    transform: scale(1.05) translateY(-0.25em) perspective(300px) rotateX(20deg) ;
}           

dom 中再增加幾個菜單項：

<nav>
    <ul>
        <li>Home</li>
        <li>Products</li>
        <li>Services</li>
        <li>Contact</li>
    </ul>
</nav>           

最後，調整一下菜單項布局：

nav ul {
    justify-content: space-between;
    flex-direction: column;
}           

大功告成！

原文位址：

https://segmentfault.com/a/1190000014930183