摇摆不定的下划线导航动画

下载代码

html

css

分享到微信朋友圈

html

<div class="container">
  <svg class="snake" viewBox="0 0 100 100">
            <path d="M 5,50.000015 H 35 C 35,50.000015 35.966338,49.750005 36.875001,49.750005 C 37.783664,49.750005 38.749998,50.000015 38.749998,50.000015 C 38.749998,50.000015 39.622117,50.500015 40.624999,50.500015 C 41.627882,50.500015 42.5,50.000015 42.5,50.000015 C 42.5,50.000015 43.476418,48.5 44.374997,48.5 C 45.273576,48.5 46.249998,50.000015 46.249998,50.000015 C 46.249998,50.000015 47.22755,53 48.124999,53 C 49.022448,53 50,50.000015 50,50.000015 C 50,50.000015 50.977541,47 51.875001,47 C 52.772461,47 53.749998,50.000015 53.749998,50.000015 C 53.749998,50.000015 54.726428,51.5 55.624999,51.5 C 56.52357,51.5 57.5,50.000015 57.5,50.000015 C 57.5,50.000015 58.486661,49.500025 59.375001,49.500025 C 60.263341,49.500025 61.249998,50.000015 61.249998,50.000015 C 61.249998,50.000015 62.232702,50.249995 63.124999,50.249995 C 64.017296,50.249995 65,50.000015 65,50.000015 H 95"/>
        </svg>
  <div class="menu">
    <div class="item"><svg class="icon" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" x="0" y="0" version="1.1" id="svg3337" width="100" height="100" viewBox="0 0 100 100"><defs id="defs3299"><style id="style3297">.cls-2{fill:none;stroke:#000;stroke-linecap:round;stroke-width:4px;stroke-linejoin:round}</style></defs><path id="polyline3303" fill="none" stroke="#000" stroke-width="3.12948" stroke-linecap="round" stroke-miterlimit="10" d="M91.777 1.58L74.612 18.755l6.634 6.634L98.42 8.223"/><path class="cls-2" id="line3305" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M55.248 44.752L19.846 80.154"/><path class="cls-2" id="line3307" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M53.59 43.093L14.315 74.622"/><path class="cls-2" id="line3309" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M51.931 41.434L9.887 69.091"/><path class="cls-2" id="line3311" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M49.717 39.22L6.014 63.004"/><path class="cls-2" id="line3313" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M47.503 37.006L3.244 56.925"/><path class="cls-2" id="line3315" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M45.289 34.792L1.586 50.838"/><path class="cls-2" id="line3317" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M56.907 46.41L25.378 85.685"/><path class="cls-2" id="line3319" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M58.566 48.069L30.909 90.113"/><path class="cls-2" id="line3321" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M60.78 50.283L36.996 93.986"/><path class="cls-2" id="line3323" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M62.994 52.497L43.075 96.756"/><path class="cls-2" id="line3325" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M65.208 54.711L49.162 98.414"/><path d="M26.363 37.124c1.135 5.64 6.9 15.522 13.95 22.563 7.05 7.041 16.923 12.807 22.563 13.95" id="path3327" fill="none" stroke="#000" stroke-width="4.694" stroke-miterlimit="10"/><path d="M67.508 52.794l.673-14.082 14.176-12.22-8.848-8.85L61.312 31.82l-14.083.673a3.13 3.13 0 0 0-2.989 3.13c0 3.465 2.692 8.504 7.16 12.971 4.466 4.467 9.505 7.127 12.97 7.159a3.13 3.13 0 0 0 3.138-2.958z" id="path3329" fill="none" stroke="#000" stroke-width="3.129" stroke-miterlimit="10"/><path d="M73.509 17.643L61.312 31.819l-14.083.673a3.13 3.13 0 0 0-2.989 3.13c0 3.465 2.692 8.504 7.16 12.971 4.466 4.467 9.505 7.127 12.97 7.159a3.13 3.13 0 0 0 3.13-2.989l.673-14.083 14.184-12.189zm-2.214 11.062a2.347 2.347 0 1 1 3.317 0 2.347 2.347 0 0 1-3.317 0z" id="path3331" stroke-width=".782"/></svg>Rakes</div>
    <div class="item"><svg class="icon" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" x="0" y="0" version="1.1" id="svg2113" width="100" height="100" viewBox="0 0 100 100"><defs id="defs2093"><style id="style2091">.cls-2{fill:none;stroke:#000;stroke-width:4px;stroke-linejoin:round}</style></defs><path id="polyline2097" fill="none" stroke="#000" stroke-width="3.15332" stroke-linecap="round" stroke-miterlimit="10" d="M91.722 1.6L72.053 21.261l6.693 6.693L98.407 8.286"/><path class="cls-2" d="M53.67 40.773s-11.155 12.266-8.924 14.49c2.23 2.222 14.49-8.917 14.49-8.917" id="path2099" fill="none" stroke="#000" stroke-width="3.153" stroke-linejoin="round"/><path class="cls-2" d="M59.487 46.598l20.371-17.532-8.916-8.916-17.533 20.37-12.014-12.014L5.408 64.501l-1.916 1.94-1.915 1.892c1.781 4.146 6.606 10.58 13.062 17.028 6.457 6.448 12.89 11.28 17.036 13.062l1.916-1.915 1.947-1.908 35.964-35.987z" id="path2101" fill="none" stroke="#000" stroke-width="3.153" stroke-linejoin="round"/><path class="cls-2" d="M72.053 62.5a2.365 2.365 0 0 0 0-3.343l-.56-.56" id="path2103" fill="none" stroke="#000" stroke-width="3.153" stroke-linejoin="round"/><path class="cls-2" d="M41.395 28.506l-.56-.56a2.365 2.365 0 0 0-3.342 0" id="path2105" fill="none" stroke="#000" stroke-width="3.153" stroke-linejoin="round"/><path d="M53.67 40.426v.347s-11.155 12.266-8.924 14.49c2.23 2.222 14.49-8.917 14.49-8.917l-.048.386h.473l-.174-.173 20.371-17.532-8.916-8.877L53.67 40.213zM68.71 27.954a2.365 2.365 0 1 1 0 3.343 2.365 2.365 0 0 1 0-3.343z" id="path2107" stroke-width=".788"/></svg>Shovels</div>
    <div class="item"><svg class="icon" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="100" height="100" viewBox="0 0 100 100"><circle cx="-16.798" cy="70.723" r="1.566" transform="rotate(-45)" /><path d="M99.048 33.45a4.7 4.7 0 0 0-6.14-2.546l-.18.086-37.219 21.367-2.85 1.214a4.7 4.7 0 0 0-2.178 1.848l-.666-.368a4.7 4.7 0 0 0-5.608.783l-.548.548.54-.54a4.7 4.7 0 0 0 .784-5.608l-.337-.705a4.644 4.644 0 0 0 1.856-2.17l1.183-2.85L69.02 7.29a1.418 1.418 0 0 0 .086-.18 4.7 4.7 0 0 0-2.53-6.14L65.127.367a4.7 4.7 0 0 0-6.101 2.451L37.652 40.037s0 .062-.04.094l-.046.086-1.222 2.945a4.7 4.7 0 0 0-.314 1.417 41.66 41.66 0 0 0-.595 10.308l-2.02 3.43c-3.564 1.88-9.4 5.107-17.145 10.002C.786 78.054.002 87.962.002 88.385a1.566 1.566 0 0 0 2.35 1.441l19.071-11.247L10.184 97.65a1.566 1.566 0 0 0 1.347 2.35h.094c.415 0 10.331-.783 20.066-16.236 4.778-7.597 7.99-13.315 10.002-17.145l3.423-2.02a41.51 41.51 0 0 0 10.307-.596 4.7 4.7 0 0 0 1.418-.337l2.945-1.221.117-.063h.063L97.2 40.992a4.7 4.7 0 0 0 2.444-6.093zM39.242 44.36l.618-1.496 4.34 1.801-.62 1.496a1.566 1.566 0 0 1-2.067.846l-1.449-.603a1.566 1.566 0 0 1-.846-2.044zm22.54-40.062a1.465 1.465 0 0 0 .095-.18 1.566 1.566 0 0 1 2.044-.846l1.449.603a1.566 1.566 0 0 1 .877 1.966l-20.67 35.981-4.315-1.785zM4.193 85.111a20.301 20.301 0 0 1 1.01-1.958c1.755-3.015 5.39-7.566 12.713-12.18a285.093 285.093 0 0 1 12.367-7.393L24.72 72.98zm24.852-3.008C24.44 89.427 19.88 93.07 16.865 94.815a20.301 20.301 0 0 1-1.958 1.01L38.38 56.038a1.566 1.566 0 0 0 .204-.971 31.556 31.556 0 0 1 0-5.945c.11.055.203.125.32.172l1.45.603a4.7 4.7 0 0 0 1.073.298l.846 1.527a1.566 1.566 0 0 1-.282 1.849l-.54.54a4.7 4.7 0 0 0-.212 6.423c-1.16 2.498-4.786 9.805-12.195 21.57zm15.9-20.7a1.52 1.52 0 0 0-.713.11c.188-.4.297-.65.313-.705a1.566 1.566 0 0 0-.047-1.332 4.7 4.7 0 0 0 1.379-.948l.548-.548a1.566 1.566 0 0 1 1.864-.258l1.566.846a4.7 4.7 0 0 0 .274 1.112l.596 1.449c.047.11.117.211.172.32a31.556 31.556 0 0 1-5.952-.046zm10.714-.666a1.566 1.566 0 0 1-2.044-.846l-.595-1.449a1.566 1.566 0 0 1 .845-2.044l1.496-.619 1.817 4.379zM95.9 38.102l-.18.086-35.754 20.568-1.786-4.316 36.028-20.67a1.566 1.566 0 0 1 1.966.878l.603 1.45a1.566 1.566 0 0 1-.877 2.043z"/></svg>Scissors</div>
  </div>
</div>

css

html {
  font-family: "Inter", sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;overflow: hidden;background-color: #fb7474;
}
.container {
  overflow: hidden;
  position: relative;
  padding-bottom: 40px;
}
.snake {
  position: absolute;
  transition: transform 500ms;
  width: 100%;
  transform: translateY(-50%);
  top: 86%;
}
.snake path {
  fill: none;
  stroke: black;
  stroke-dasharray: 29 100;
  stroke-width: 1.5px;
}
.pos1 .snake {
  transform: translateX(33.33%) translateY(-50%);
}
.pos2 .snake {
  transform: translateX(66.67%) translateY(-50%);
}
.left .snake path {
  stroke-dashoffset: 0;
  transform: translateX(0);
  transition: stroke-dasharray 500ms, stroke-dashoffset 500ms, transform 500ms;
}
.right .snake path {
  stroke-dashoffset: -70px;
  transform: translateX(-60%);
  transition: stroke-dasharray 500ms, stroke-dashoffset 500ms, transform 500ms;
}
.instant .snake path {
  transition: none;
}
.menu {
  display: flex;
  height: 100px;
  left: 9px;
  position: relative;
}
.item {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 136px;
}
.icon {
  width: 50px;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg