【每日一練】01—CSS實現(xiàn)3D菜單效果
作者 | 楊小愛
寫在前面
很多人跟我說，自學編程，學著學著就從入門到放棄了，最后轉行了，其實，說心里話，這個是很正常的。因為，自學很難堅持，如果不是熱愛，如果不是為了養(yǎng)家糊口，估計很多人是不會選擇做程序員的，很多人選擇做程序員，也只是為了到互聯(lián)網行業(yè)賺錢，如果覺得編程也賺不到錢了，自然就轉行了。
其實，我也是自學的編程，雖然，這么多年了，我還沒有放棄，是因為我覺得，我一直把它當成一個愛好來學習，就這樣，慢慢堅持著，學習著。
因為我也知道，世界上的知識與技能我永遠也學不完，我能學的就是自己還喜歡的東西。
因此，今天想開設一個【每日一練】的欄目，每天練習一些小案例，把這些案例練習當成一種玩游戲打怪升級一樣，我們純粹就是為了好玩，不考慮什么瀏覽器兼容性，也不考慮什么實用不實用性，把它當成一種娛樂，一種編程帶來的快樂。
通過代碼去實現(xiàn)一些可能平時都用不上的效果，也許有人會說，那這個練習還有什么意義？其實，這個意義就在于讓自己開心，讓自己覺得編程是一件很好玩的事情就可以了。
當然，也希望大家能通過【每日一練】學會去堅持做一件讓自己開心，自己喜歡的事情，當然，這個事情，不一定是編程，可以是任何自己喜歡的事情。
比方，每日拍一張照片，每日寫一句金句，每日修一張圖片，每日制作一張海報等等，只要是自己喜歡的事情就好了，貴在堅持，學習先從一個點開始，然后積累到一條線，最后再到一個面。
好了，我們就從今天開始吧。
以下是今天小練習的最終效果，代碼，我貼在下面了，大家可以自行練習。
<html><head><meta charset="utf-8"><title>【每日一練】01-CSS實現(xiàn)3D菜單效果</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" /></head><body><ul><li style="--i:8;--clr:#00a6bc;"><a href="https://www.webqdkf.com/"><span><i class="fa fa-caret-right"></i></span> 網站首頁</a></li><li style="--i:7;--clr:#0a66c2;"><a href="https://www.webqdkf.com/HTML/"><span><i class="fa fa-caret-right"></i></span>HTML/CSS </a></li><li style="--i:6;--clr:#1da1f2;"><a href="https://www.webqdkf.com/JS/"><span><i class="fa fa-caret-right"></i></span>JavaScript</a></li><li style="--i:5;--clr:#c32aa3;"><a href="https://www.webqdkf.com/tx/"><span><i class="fa fa-caret-right"></i></span> 源碼案例</a></li><li style="--i:4;--clr:#d4620b;"><a href="https://www.webqdkf.com/zyk/books/"><span><i class="fa fa-caret-right"></i></span> 電子書</a></li><li style="--i:3;--clr:#0a66c2;"><a href="http://www.webqdkf.com/gksj.html"><span><i class="fa fa-caret-right"></i></span> 在線課程</a></li><li style="--i:2;--clr:#d30aa8;"><a href="http://www.aierweisi.com"><span><i class="fa fa-caret-right"></i></span> 建站主機</a></li><li style="--i:1;--clr:#00a6bc;"><a href="http://www.webqdkf.com/zyk/gjx/"><span><i class="fa fa-caret-right"></i></span> 開發(fā)工具</a></li></ul></body></html>
CSS完整代碼：
*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Oswald', sans-serif;}body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #434750;gap: 130px;}ul{position: relative;transform: skewY(-15deg);}ul li{position: relative;list-style: none;width: 120px;padding: 15px;background: #3e3f46;z-index: calc(1 * var(--i));transition: 0.5s;}ul li:hover{background: var(--clr);transform: translateX(-50px);}ul li::before{content: '';position: absolute;top: 0;left: -40px;width: 40px;height: 100%;background: #3e3f46;filter: brightness(0.7);transform-origin: right;transform: skewY(45deg);transition: 0.5s;}ul li:hover::before{background: var(--clr);filter: brightness(0.7);}ul li::after{content: '';position: absolute;top: -40px;left: 0px;width: 100%;height: 40px;background: #3e3f46;filter: brightness(0.9);transform-origin: bottom;transform: skewX(45deg);transition: 0.5s;}ul li:hover::after{background: var(--clr);filter: brightness(0.9);}ul li a{text-decoration: none;color: #999;display: block;text-transform: uppercase;letter-spacing: 0.05em;transition: 0.5s;}ul li:hover a{color: #fff;}ul li:last-child::after{box-shadow: -120px 120px 20px rgba(0,0,0,0.25);}ul li a span{position: absolute;top: 0;left: -40px;width: 40px;text-align: center;height: 100%;transform-origin: right;transform: skewY(45deg);transition: 0.5s;display: flex;justify-content: center;align-items: center;font-size: 1.25em;opacity: 0.5;}ul li:hover a span{opacity: 1;}
寫在最后
以上就是【每日一練】的全部內容，希望今天的小練習對你有用，如果你覺得有幫助的話，請點贊我，關注我，并將它分享給你身邊做開發(fā)的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。
學習更多技能
請點擊下方公眾號
