其他
【每日一练】86—一个动画菜单效果的实现果
今天练习的这个效果，也是非常常见的一个效果，你也会在很多产品中看到它，算是一个比较实用型的小练习，现在，我们一起来看一下它的最终效果：
<!DOCTYPE html><html><head><title>【每日一练】86—一个动画菜单效果的实现</title><!--ICON文件引入--> <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><!--CSS文件引入--> <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>
*{ 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;}写在最后
以上就是今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号