寫在前面
下拉菜單一直是web項目里比較常見的一個功能，它的出現，可以讓我們在有限的頁面空間裡實現更多的選擇。
今天這個下拉菜單效果，也沒有什麼特別的地方，是一個比較常見效果，具體的效果，請看下面的最終效果：
看完了效果，現在我們一起來看一下，它的最終代碼實現過程。<!DOCTYPE html><html><head><title>【每日一練】98—動畫下拉菜單效果的實現</title></head><body> <div class="dropdown"> <input type="text" class="text2" readonly placeholder="選擇你擅長的技能"> <div class="option"> <div onmouseover="show('html')">HTML</div> <div onmouseover="show('CSS')">CSS</div> <div onmouseover="show('JavaScript')">JavaScript</div> <div onmouseover="show('ReactJS')">ReactJS</div> <div onmouseover="show('VueJS')">VueJS</div> </div> </div> <script> function show(a){ document.querySelector('.text2').value = a; } let dropdown = document.querySelector('.dropdown'); dropdown.onclick = function(){ dropdown.classList.toggle('active') }</script></body></html>*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif;}body { display: flex; justify-content: center; min-height: 100vh; background: #f9f9f9;}.dropdown { position: relative; margin-top: 100px; width: 300px; height: 50px;}.dropdown::before { content: ''; position: absolute; top: 25px; right: 28px; width: 12px; height: 2px; background: #555; transform: rotate(40deg); z-index: 10; transition: 0.5s;}.dropdown.active::before { right: 20px;}.dropdown::after { content: ''; position: absolute; top: 25px; right: 20px; width: 12px; height: 2px; background: #555; transform: rotate(-40deg); z-index: 10; transition: 0.5s;}.dropdown.active::after { right: 28px;}.dropdown input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; border: none; border-radius: 10px; padding: 12px 20px; font-size: 16px; background: #fff; text-transform: capitalize; box-shadow: 0 5px 20px rgba(0,0,0,0.05); outline: none;}.dropdown .option { position: absolute; top: 70px; width: 100%; border-radius: 10px; background: #fff; box-shadow: 0 30px 30px rgba(0,0,0,0.05); overflow: hidden; visibility: hidden; opacity: 0; transition: 0.25s;}.dropdown.active .option { visibility: visible; opacity: 1;}.dropdown .option div { padding: 12px 20px; cursor: pointer;}.dropdown .option div:hover { background: #62baea; color: #fff;}寫在最後
以上就是今天【每日一練】的全部內容，希望今天的小練習對你有用，如果你覺得有幫助的話，請點讚我，關注我，並將它分享給你身邊做開發的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。
學習更多技能
請點擊下方公眾號
留言列表