【每日一練】01—CSS實(shí)現(xiàn)3D菜單效果
作者 | 楊小愛(ài)
寫(xiě)在前面
很多人跟我說(shuō)，自學(xué)編程，學(xué)著學(xué)著就從入門(mén)到放棄了，最后轉(zhuǎn)行了，其實(shí)，說(shuō)心里話(huà)，這個(gè)是很正常的。因?yàn)椋詫W(xué)很難堅(jiān)持，如果不是熱愛(ài)，如果不是為了養(yǎng)家糊口，估計(jì)很多人是不會(huì)選擇做程序員的，很多人選擇做程序員，也只是為了到互聯(lián)網(wǎng)行業(yè)賺錢(qián)，如果覺(jué)得編程也賺不到錢(qián)了，自然就轉(zhuǎn)行了。
其實(shí)，我也是自學(xué)的編程，雖然，這么多年了，我還沒(méi)有放棄，是因?yàn)槲矣X(jué)得，我一直把它當(dāng)成一個(gè)愛(ài)好來(lái)學(xué)習(xí)，就這樣，慢慢堅(jiān)持著，學(xué)習(xí)著。
因?yàn)槲乙仓?，世界上的知識(shí)與技能我永遠(yuǎn)也學(xué)不完，我能學(xué)的就是自己還喜歡的東西。
因此，今天想開(kāi)設(shè)一個(gè)【每日一練】的欄目，每天練習(xí)一些小案例，把這些案例練習(xí)當(dāng)成一種玩游戲打怪升級(jí)一樣，我們純粹就是為了好玩，不考慮什么瀏覽器兼容性，也不考慮什么實(shí)用不實(shí)用性，把它當(dāng)成一種娛樂(lè)，一種編程帶來(lái)的快樂(lè)。
通過(guò)代碼去實(shí)現(xiàn)一些可能平時(shí)都用不上的效果，也許有人會(huì)說(shuō)，那這個(gè)練習(xí)還有什么意義？其實(shí)，這個(gè)意義就在于讓自己開(kāi)心，讓自己覺(jué)得編程是一件很好玩的事情就可以了。
當(dāng)然，也希望大家能通過(guò)【每日一練】學(xué)會(huì)去堅(jiān)持做一件讓自己開(kāi)心，自己喜歡的事情，當(dāng)然，這個(gè)事情，不一定是編程，可以是任何自己喜歡的事情。
比方，每日拍一張照片，每日寫(xiě)一句金句，每日修一張圖片，每日制作一張海報(bào)等等，只要是自己喜歡的事情就好了，貴在堅(jiān)持，學(xué)習(xí)先從一個(gè)點(diǎn)開(kāi)始，然后積累到一條線，最后再到一個(gè)面。
好了，我們就從今天開(kāi)始吧。
以下是今天小練習(xí)的最終效果，代碼，我貼在下面了，大家可以自行練習(xí)。
<html><head><meta charset="utf-8"><title>【每日一練】01-CSS實(shí)現(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> 網(wǎng)站首頁(yè)</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> 電子書(shū)</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> 建站主機(jī)</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> 開(kāi)發(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;}
寫(xiě)在最后
以上就是【每日一練】的全部?jī)?nèi)容，希望今天的小練習(xí)對(duì)你有用，如果你覺(jué)得有幫助的話(huà)，請(qǐng)點(diǎn)贊我，關(guān)注我，并將它分享給你身邊做開(kāi)發(fā)的朋友，也許能夠幫助到他。
我是楊小愛(ài)，我們明天見(jiàn)。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
