其他
【每日一练】82—CSS实现导航菜单动画效果
导航菜单栏是任何一个开发项目都会有的组件，不管是网页端还是APP端，这个都是不可缺少的一个部分，而一个好用的导航菜单栏，会帮助用户快速找到想要的内容，而一个好看导航菜单栏可以拉长用户的停留时间，我不知道，你是不是有这样的情况，就是看到一些有趣有意思的菜单效果，会不知觉的停下来，去看它的实现效果。
其实，用户这样的举动也会间接提高用户转化率，因为用户也会多花点时间去认真了解一下，这个平台上的内容。
说了这么多，其实，一句话，就是要设计出好用又好看的导航菜单栏，因此，今天，我们来练习一个导航菜单的效果，其最终效果如下：
<!doctype html><html><head> <title>【每日一练】82—CSS实现导航菜单动画效果</title></head><body> <ul class="navigation"> <li class="active"> <a href="http://www.webqdkf.com"> <span class="icon"> <ion-icon name="home-outline"></ion-icon> </span> <span class="text">我的主页</span> </a> </li> <li> <a href="http://www.webqdkf.com"> <span class="icon"> <ion-icon name="person-outline"></ion-icon> </span> <span class="text">我的项目</span> </a> </li> <li> <a href="http://www.webqdkf.com"> <span class="icon"> <ion-icon name="chatbubble-outline"></ion-icon> </span> <span class="text">收件箱</span> </a> </li> <li> <a href="http://www.webqdkf.com"> <span class="icon"> <ion-icon name="camera-outline"></ion-icon> </span> <span class="text">我的相册</span> </a> </li> <li> <a href="http://www.webqdkf.com"> <span class="icon"> <ion-icon name="settings-outline"></ion-icon> </span> <span class="text">设置</span> </a> </li> <div class="indicator"></div> </ul>
<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> <script> const list = document.querySelectorAll('.navigation li'); function activelink(){ list.forEach((item) => item.classList.remove('active')); this.classList.add('active'); } list.forEach((item) => item.addEventListener('click', activelink));</script></body></html>*{ 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: #2f363e;}.navigation { position: relative; min-width: 540px; min-height: 120px; border-radius: 30px; background: #2f363e; box-shadow: 25px 25px 75px rgba(0,0,0,0.25), 10px 10px 70px rgba(0,0,0,0.25), inset 5px 5px 10px rgba(0,0,0,0.5), inset 5px 5px 20px rgba(255,255,255,0.2), inset -5px -5px 15px rgba(0,0,0,0.75); display: flex; justify-content: center; align-items: center;}.navigation li { position: relative; list-style: none; width: 80px; margin: 0 5px;}.navigation li::before { content: ''; position: absolute; top: 35px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: #222; transition: 0.5s;}.navigation li.active::before { background: #0f0; box-shadow: 0 0 5px #0f0, 0 0 10px #0f0, 0 0 20px #0f0, 0 0 30px #0f0, 0 0 40px #0f0, 0 0 50px #0f0;}.navigation li a { display: flex; align-items: center; justify-content: center; flex-direction: column; text-decoration: none;}.navigation li a .icon { position: absolute; font-size: 1.75em; width: 80px; height: 80px; display: flex; color: #aaa; border-radius: 50%; justify-content: center; align-items: center; transition: 0.5s; transition-delay: 0.2s;} .navigation li.active a .icon{ transform: translateY(-55px); background: #29fd53; color: #fff; box-shadow: 5px 5px 7px rgba(0,0,0,0.25), inset 2px 2px 3px rgba(255,255,255,0.25), inset -3px -3px 5px rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; transition-delay: 0s;}.navigation li a .icon::before { content: ''; position: absolute; inset: 10px; background: #2f363e; box-shadow: 5px 5px 5px rgba(0,0,0,0.5), inset 2px 2px 3px rgba(255,255,255,0.25), inset -3px -3px 5px rgba(0,0,0,0.5); border-radius: 50%; transform: scale(0); transition: 0.5s;}.navigation li.active a .icon::before { transform: scale(1);}.navigation li a .text { position: absolute; font-size: 0.75em; opacity: 0; transform: translateY(20px); transition: 0.5s; padding: 2px 10px; background: #fff; border-radius: 15px; color: #2f363e; box-shadow: 5px 5px 7px rgba(0,0,0,0.25), inset -3px -3px 5px rgba(0,0,0,0.5); transition-delay: 0s;}.navigation li.active a .text { opacity: 1; transform: translateY(10px); transition-delay: 0.2s;}
写在最后
以上就是今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号