web前端開發 - 【每日一練】86—一個動畫菜單效果的實現果－鑽石舞台

今天練習的這個效果，也是非常常見的一個效果，你也會在很多產品中看到它，算是一個比較實用型的小練習，現在，我們一起來看一下它的最終效果：

看完了這個最終效果，我們再來看一下，它的代碼實現過程。

HTML代碼：

<!DOCTYPE html><html><head><title>【每日一練】86—一個動畫菜單效果的實現</title> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script><script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> <link rel="stylesheet" type="text/css" href="style.css"></head><body> <div class="navigation"> <div class="menuToggle"></div> <div class="menu"> <ul> <li style="--i:0.1s;"><a href="https://www.webqdkf.com/"><ion-icon name="camera-outline"></ion-icon></a></li> <li style="--i:0.2s;"><a href="https://www.webqdkf.com/"><ion-icon name="settings-outline"></ion-icon></a></li> <li style="--i:0.3s;"><a href="https://www.webqdkf.com/"><ion-icon name="trash-outline"></ion-icon></a></li> </ul> </div> </div> <script> let menuToggle = document.querySelector('.menuToggle'); menuToggle.onclick = function(){ menuToggle.classList.toggle('active') }</script></body></html>

CSS代碼：

*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif;}body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(45deg,#ff216d,#2196f3);}.navigation { position: relative; display: flex; justify-content: center; align-items: center;}.menuToggle { position: relative; width: 70px; height: 70px; background: #fff; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 0 15px 25px rgba(0,0,0,0.15);}.menuToggle::before { content: '+'; position: absolute; font-size: 3em; font-weight: 200; color: #e91e63; transition: 1.5s;}.menuToggle.active::before { transform: rotate(225deg);} .menu { position: absolute; width: 30px; height: 30px; background: #fff; border-radius: 70px; z-index: -1; transition: transform 0.5s, width 0.5s, height 0.5s; transition-delay: 1s, 0.5s, 0.5s; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);}.menuToggle.active ~ .menu { transform: translateY(-100px); height: 70px; width: 240px; z-index: 1; transition-delay: 0s, 0.5s, 0.5s; box-shadow: 0 15px 25px rgba(0,0,0,0.1);}.menuToggle ~ .menu::before { content: ''; position: absolute; left: calc(50% - 8px); bottom: 4px; width: 16px; height: 16px; transform: rotate(45deg); background: #fff; border-radius: 2px; transition: 0.5s;}.menuToggle.active ~ .menu::before { transition-delay: 0.5s; bottom: -6px;}.menu ul { position: relative; display: flex; justify-content: center; align-items: center; height: 80px; gap: 40px; z-index: 10;}.menu ul li { list-style: none; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(-30px); transition: 0.25s; transition-delay: 0s; transition-delay: calc(0s + var(--i));}.menuToggle.active ~ .menu ul li { visibility: visible; opacity: 1; transform: translateY(0px); transition-delay: calc(0.75s + var(--i));}.menu ul li a { display: block; font-size: 2em; text-decoration: none; color: #555;}.menu ul li:hover a { color: #e91e63;}

寫在最後

以上就是今天【每日一練】的全部內容，希望今天的小練習對你有用，如果你覺得有幫助的話，請點讚我，關注我，並將它分享給你身邊做開發的朋友，也許能夠幫助到他。

我是楊小愛，我們明天見。

學習更多技能

請點擊下方公眾號