css3动画导航列表动态效果（附实例）

html代码：

<nav>
  <ul>
    <li><h2>首页</h2></li>
    <li><a href="#"><i></i>列表一</a></li>
    <li><a href="#"><i></i>列表二</a></li>
    <li><a href="#"><i></i>列表三</a></li>
    <li><a href="#"><i></i>列表死</a></li>
    <li><a href="#"><i></i>列表五</a></li>   
    <li><a href="#"><i></i>列表六</a></li>
  </ul>
</nav>

css3代码：

body {
  aperspective:1000px;
  position:relative;
  margin:0;
  min-height:100vh;
  overflow:clip;
  display:grid;
  place-items:center;
  transition:background 1s;
  background:#fff;
}
nav {
  filter:-shadow(0.25rem 0.25rem 0.5rem #0005);
  width:100%;
  max-width:14rem;
}
@keyframes firstShow {
  0%,100% {
    transform:perspective(1000px) translate3d(0,0,0em);
  }
  50% {
    transform:perspective(1000px) translate3d(0,0,3em);
  }
}
@keyframes show {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
ul {
  position:relative;
  aperspective:1000px;
  list-style:none;
  padding-left:0;
  box-sizing:border-box;
  border-radius:1rem;
  transform-style:preserve-3d;
  perspective:1000px;
  font:lighter 1rem Helvetica,sans-serif;
}
ul li {
  height:3rem;
  display:flex;
  background:linear-gradient(#00000005,#0000),#fff;
  aborder-bottom:1px solid #0001;
  abackground-clip:padding-box;
  box-shadow:inset 0 0 1rem -0.5rem #0002;
  transition:transform 0.35s,box-shadow 0.35s,background 0.35s;
  transform:translate3d(0,0,0);
  opacity:0;
  animation:firstShow 0.5s ease-in-out,show 0.15s linear forwards;
}
ul li:nth-child(1) {
  animation-delay:0.50s;
}
ul li:nth-child(2) {
  animation-delay:0.60s;
}
ul li:nth-child(3) {
  animation-delay:0.70s;
}
ul li:nth-child(4) {
  animation-delay:0.80s;
}
ul li:nth-child(5) {
  animation-delay:0.90s;
}
ul li:nth-child(6) {
  animation-delay:1.00s;
}
ul li:nth-child(7) {
  animation-delay:1.10s;
}
ul li:nth-child(8) {
  animation-delay:1.20s;
}
ul li:nth-child(9) {
  animation-delay:1.30s;
}
ul li:first-child {
  border-radius:1rem 1rem 0 0;
}
ul li:last-child {
  border-radius:0 0 1rem 1rem;
}
ul li:hover,ul li:focus-within {
  transform:translate3d(0,0,3rem);
}
ul li:hover + &,ul li:has(+ &:focus-within),ul li:focus + &,ul li:has(+ &:focus-within) {
  box-shadow:inset 0 1rem 1rem -1rem #0003;
  transform:translate3d(0,0,2rem);
}
ul li:has(+ &:hover),ul li:has(+ &:focus-within) {
  box-shadow:inset 0 -1rem 1rem -1rem #0003;
}
ul li:hover + & + &,ul li:focus-within + & + & {
  box-shadow:inset 0 1rem 0.5rem -0.75rem #0002;
}
ul li:has(+ & + &:hover),ul li:has(+ & + &:focus-within) {
  box-shadow:inset 0 -1rem 0.5rem -0.75rem #0002;
}
h2,a {
  font-size:0.9rem;
  display:flex;
  align-items:center;
  flex:1;
  padding:0 1rem;
  text-decoration:none;
  color:#000;
}
h2 {
  font-size:1rem;
  font-weight:400;
}
i {
  margin-right:0.25em;
  width:1rem;
}
@media (prefers-reduced-motion) {
  nav * {
    transition-duration:0s !important;
    animation-duration:0s !important;
  }
}

进入实例入口