仿 MacOS Dock 栏

最新推荐文章于 2024-07-23 09:44:04 发布

今晚也失眠

最新推荐文章于 2024-07-23 09:44:04 发布

阅读量1.4k

点赞数 25

文章标签： macos

本文链接：https://blog.csdn.net/qq_21115481/article/details/139706796

版权

仿 MacOS Dock 栏

<style>
        html {
          font-size: 15px;
        }

        body {
          margin: 0;
          padding: 0;
          display: flex;
          width: 100%;
          min-height: 100vh;
          overflow: hidden;
          align-items: flex-end;
          background-image: linear-gradient( 109.6deg,  rgba(25,170,209,1) 11.3%, rgba(21,65,249,1) 69.9% );
        }

        .glass {
          width: 100%;
          height: 8rem;
          background: rgba( 255, 255, 255, 0.25 );
          box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
          backdrop-filter: blur( 4px );
          -webkit-backdrop-filter: blur( 4px );
          border: 1px solid rgba( 255, 255, 255, 0.18 );
          display: flex;
          justify-content: center;
        }

        .dock {
          --scale: 1;

          list-style: none;
          margin: 0;
          padding: 0;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .dock li {
          font-size: calc(6rem * var(--scale));
          padding: 0 .5rem;
          cursor: default;

          position: relative;
          top: calc((6rem * var(--scale) - 6rem) / 2 * -1);

          transition: 15ms all ease-out;
        }

        .dock li.loading {
          animation: 1s loading ease-in infinite;
        }

        @keyframes loading {
          0%, 100% {
            transform: translateY(0px);
          }
          60% {
            transform: translateY(-40px);
          }
        }
</style>

<html>
        <div class="glass">
          <ul class="dock">
            <li>😃</li>
            <li>😊</li>
            <li>😜</li>
            <li>😍</li>
            <li>🤩</li>
            <li>🥳</li>
            <li>🥶</li>
          </ul>
        </div>
</html>


<script>
        document.querySelectorAll('.dock li').forEach(li => {
          li.addEventListener('click', e => {
            e.currentTarget.classList.add('loading')
          })

          li.addEventListener('mousemove', e => {
            let item = e.target
            let itemRect = item.getBoundingClientRect()
            let offset = Math.abs(e.clientX - itemRect.left) / itemRect.width

            let prev = item.previousElementSibling || null
            let next = item.nextElementSibling || null

            let scale = 0.6

            resetScale()

            if (prev) {
              prev.style.setProperty('--scale', 1 + scale * Math.abs(offset - 1))
            }

            item.style.setProperty('--scale', 1 + scale)

            if (next) {
              next.style.setProperty('--scale', 1 + scale * offset)
            }
          })
        })

        document.querySelector('.dock').addEventListener('mouseleave', e => {
          resetScale()
        })

        function resetScale() {
          document.querySelectorAll('.dock li').forEach(li => {
            li.style.setProperty('--scale', 1)
          })
        }
</script>