veloxi+svg模仿macos dock图标悬停放大动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：veloxi+svg模仿macos dock图标悬停放大动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
* {
  box-sizing: border-box;
}

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.macos-dock {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  padding: 8px;
  height: 58px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.items {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0 8px;
}

.item {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.02);
  background: #2d2d2d;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  top: 0;
  position: relative;
}

.item::before {
  content: attr(data-tooltip);
  display: block;
  position: absolute;
  top: -28px;
  font-size: 10px;
  border-radius: 4px;
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: #282828;
  padding: 3px 8px;
  opacity: 0;
  pointer-events: none;
  transition: 0.1s ease-out opacity;
}

.item:hover::before {
  opacity: 1;
}

.item > svg {
  width: 50%;
  color: #f0f0f0;
}
</style>



  
  
</head>

<body translate="no">
  <div class="macos-dock" data-vel-plugin="MacOsDock" data-vel-view="root">
  <div class="items">
    <div class="item" data-vel-view="item" data-tooltip="Email">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" style="enable-background: new 0 0 512 512" xml:space="preserve" fill="currentColor">
        <g>
          <path d="M331.756,277.251l-42.881,43.026c-17.389,17.45-47.985,17.826-65.75,0l-42.883-43.026L26.226,431.767
                  C31.959,434.418,38.28,436,45,436h422c6.72,0,13.039-1.58,18.77-4.232L331.756,277.251z"></path>
        </g>
        <g>
          <path d="M467,76H45c-6.72,0-13.041,1.582-18.772,4.233l164.577,165.123c0.011,0.011,0.024,0.013,0.035,0.024
                  c0.011,0.011,0.013,0.026,0.013,0.026l53.513,53.69c5.684,5.684,17.586,5.684,23.27,0l53.502-53.681c0,0,0.013-0.024,0.024-0.035
                  c0,0,0.024-0.013,0.035-0.024L485.77,80.232C480.039,77.58,473.72,76,467,76z"></path>
        </g>
        <g>
          <path d="M4.786,101.212C1.82,107.21,0,113.868,0,121v270c0,7.132,1.818,13.79,4.785,19.788l154.283-154.783L4.786,101.212z"></path>
        </g>
        <g>
          <path d="M507.214,101.21L352.933,256.005L507.214,410.79C510.18,404.792,512,398.134,512,391V121
                  C512,113.866,510.18,107.208,507.214,101.21z"></path>
        </g>
      </svg>
    </div>
    <div class="item" data-vel-view="item" data-tooltip="Design">
      <svg enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
        <path d="m22.793 95.781c4.51 17.83 13.761 34.13 26.762 47.13l11.903 11.75 93.364-93.358-11.902-11.751c-13.011-13-29.302-22.25-47.133-26.76l-89.555-22.64c-1.71-.43-3.52.07-4.77 1.31-1.24 1.25-1.74 3.06-1.31 4.77z"></path>
        <path d="m128.239 220.581 93.356-93.35-45.424-44.85-93.362 93.356z"></path>
        <path d="m300.085 326.505h132.024v79.137h-132.024z" transform="matrix(.707 -.707 .707 .707 -151.626 366.073)"></path>
        <path d="m461.973 368.587-93.363 93.357 30.726 30.727c12.471 12.46 29.052 19.33 46.683 19.33s34.212-6.87 46.683-19.33c25.732-25.74 25.732-67.62 0-93.359z"></path>
        <path d="m230.954 274.888c5.859-5.858 15.357-5.858 21.214 0l51.67 51.667 22.739-22.737-29.494-29.491c-5.859-5.857-5.859-15.354 0-21.213 5.858-5.857 15.356-5.859 21.214 0l29.494 29.491 23.139-23.138-51.67-51.667c-5.859-5.857-5.859-15.355 0-21.213 5.858-5.857 15.356-5.859 21.214 0l51.67 51.668 23.14-23.138-29.494-29.491c-5.859-5.857-5.859-15.354 0-21.213 5.858-5.857 15.356-5.859 21.214 0l29.494 29.491 23.139-23.138-51.67-51.668c-5.859-5.857-5.859-15.355 0-21.213s15.357-5.858 21.214 0l51.67 51.668 21.22-21.253c6.403-6.402 9.928-14.915 9.928-23.969s-3.527-17.565-9.928-23.968l-70.441-70.434c-6.403-6.403-14.915-9.929-23.969-9.929s-17.567 3.525-23.97 9.928l-373.763 373.772c-6.402 6.401-9.928 14.914-9.928 23.967 0 9.054 3.526 17.565 9.928 23.968l70.442 70.436c6.402 6.402 14.914 9.929 23.969 9.929s17.567-3.526 23.969-9.928l21.254-21.251-29.493-29.491c-5.858-5.857-5.858-15.355 0-21.213 5.858-5.857 15.35.........完整代码请登录后点击上方下载按钮下载查看