如何創作按鈕被從紙上掀起的立體效果
阿新 • • 發佈:2018-11-21
效果預覽
按下右側的“點選預覽”按鈕可以在當前頁面預覽,點選連結可以全屏預覽。
https://codepen.io/comehope/pen/KRbXGe
可互動視訊教程
此視訊是可以互動的,你可以隨時暫停視訊,編輯視訊中的程式碼。
請用 chrome, safari, edge 開啟觀看。
原始碼下載
本地下載
每日前端實戰系列的全部原始碼請從 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;
}
大功告成!