按下右側的「點擊預覽」按鈕能夠在當前頁面預覽,點擊連接能夠全屏預覽。css
https://codepen.io/comehope/pen/qJEdKbhtml
此視頻是能夠交互的,你能夠隨時暫停視頻,編輯視頻中的代碼。前端
請用 chrome, safari, edge 打開觀看。git
https://scrimba.com/p/pEgDAM/cEJRKudgithub
每日前端實戰系列的所有源代碼請從 github 下載:chrome
https://github.com/comehope/front-end-daily-challengesapi
定義 dom,容器是一個無序列表,包含 4 個元素,表明 4 個按鈕:dom
<ul> <li>home</li> <li>products</li> <li>services</li> <li>contact</li> </ul>
居中顯示:函數
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: cornsilk; }
去掉列表項前面的符號:flex
ul { padding: 0; list-style-type: none; }
設置按鈕的邊框和背景的樣式,背景採用漸變色,但漸變的方向依次交替:
ul li { box-sizing: border-box; width: 15em; height: 3em; font-size: 20px; border-radius: 0.5em; margin: 0.5em; box-shadow: 0 0 1em rgba(0,0,0,0.2); } ul li:nth-child(odd) { background: linear-gradient(to right, orange, tomato); } ul li:nth-child(even) { background: linear-gradient(to left, orange, tomato); }
設置按鈕上文字的樣式,依次交替居左或居右:
ul li { color: white; font-family: sans-serif; text-transform: capitalize; line-height: 3em; } ul li:nth-child(odd) { text-align: left; padding-left: 10%; } ul li:nth-child(even) { text-align: right; padding-right: 10%; }
設置按鈕的透視效果,依次交替向左旋轉和向右旋轉,此時透視的距離是 500px
,注意 perspective() 函數和 rotateY() 函數的順序不能寫反:
ul li:nth-child(odd) { transform: perspective(500px) rotateY(45deg); } ul li:nth-child(even) { transform: perspective(500px) rotateY(-45deg); }
爲按鈕增長懸停效果,使懸停時的透視距離變短爲 200px
,透視距離越短,旋轉的幅度看起來就越大:
ul li:nth-child(odd):hover { transform: perspective(200px) rotateY(45deg); padding-left: 5%; } ul li:nth-child(even):hover { transform: perspective(200px) rotateY(-45deg); padding-right: 5%; }
最後,設置一個緩動時間,使效果轉換變得平滑:
ul li { transition: 0.3s; cursor: pointer; }
大功告成!