首页 文章详情

【每日一练】86—一个​动画菜单效果的实现果

web前端开发 | 49 2022-10-23 10:05 0 0 0
UniSMS (合一短信)

7d56c0e8556b2ed2ec2e6311228dc0bf.webp


今天练习的这个效果,也是非常常见的一个效果,你也会在很多产品中看到它,算是一个比较实用型的小练习,现在,我们一起来看一下它的最终 效果:

46c33d5feb4f9fa0604fa7cac4bcf997.webp

看完了这个最终效果,我们再来看一下,它的代码实现过程。 HTML代码:
      
        
          <!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>
        
      
      
        
          
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;
      
      
        }
      
    

写在最后

以上就是今天【每日一练】的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。

我是杨小爱,我们明天见。

学习更多技能

请点击下方公众号

e44a56bb4fac68a8e437c82c5a64a067.webp

6348a57fafe98e7b8385cbd96487e254.webp

3f5d8966f7f741c0d1b7b11bff4182f2.webp

good-icon 0
favorite-icon 0
收藏
回复数量: 0
    暂无评论~~
    Ctrl+Enter