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

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3动画导航列表动态效果 实例</title>
	<style>
	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;
		}
	}
	</style>
</head>
<body>
    <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>

web建站教程

源代码：

运行结果：

web建站教程

源代码：点击运行 》

运行结果：

源代码：