动画遇见菜单背景
关键词：transition、opacity和transform
菜单是前端开发的必修课之一，普通菜单没有动画参与，显得多少缺点灵魂。文章涉及css关键词已在开头列出，文章实现的菜单功能还可以丰富和扩展，根据开发实际场景修改即可使用；
看看效果：
css代码
<style lang="css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: hsl(225deg, 9.5%, 8.2%);
}
nav {
background-color: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px rgba(0, 0, 0, 0.4);
}
nav ul li {
list-style: none;
display: inline-block;
padding: 13px 35px;
margin: 10px;
font-size: 18px;
font-weight: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: all 0.5s ease;
}
nav ul li::after {
content: "";
background-color: #10ac84;
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s ease, opacity 0.5s ease;
}
nav ul li:hover {
color: #fff;
}
nav ul li:hover::after {
top: 50%;
opacity: 1;
}
</style>HTML代码：
<body>
<nav>
<ul>
<li>全部</li>
<li>图片</li>
<li>视频</li>
<li>新闻</li>
<li>图书</li>
<li>更多</li>
</ul>
</nav>
</body>以上就是今天文章的分享完整内容，后期会陆续更新更多更好玩的css动画内容，供大家参考。不足之处，多多包涵。评论区提建议，有什么想要实现的效果，都可以打出来。谢谢各位对布衣前端的支持和鼓励。
