CSS3菜單動畫效果是現在網頁設計中非常常見的特效，可以讓網頁更加生動有趣，增加用戶的瀏覽體驗。下面我們來學習幾種常見的CSS3菜單動畫效果。

.main_menu {
display: flex;
justify-content: center;
position: relative;
z-index: 1;
}
.main_menu ul {
display: flex;
list-style: none;
}
.main_menu li {
margin: 0 30px;
position: relative;
}
.main_menu li a {
display: block;
color: #000;
text-transform: uppercase;
font-weight: 700;
position: relative;
z-index: 1;
}
.main_menu li a:before,
.main_menu li a:after {
content: "";
position: absolute;
background: #000;
z-index: -1;
transition: all .3s ease;
}
.main_menu li a:before {
top: 100%;
left: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
}
.main_menu li a:after {
bottom: 100%;
right: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
}
.main_menu li a:hover:before,
.main_menu li a:hover:after {
transform: scaleX(1);
}
.main_menu li a:hover {
color: #fff;
cursor: pointer;
}
.main_menu li a:hover:before {
background: #fff;
}
.main_menu li a:hover:after {
background: #fff;
}

上面的代碼演示的是一個簡單的菜單動畫效果，當鼠標懸停在菜單上方，菜單文字將變為白色，同時菜單上下方的黑線也會放大，給人一種更加醒目的效果。

除了上面的效果之外，還有很多其他的CSS3菜單動畫效果，可以根據需要自行調整?？偟膩碚f，CSS3菜單動畫效果可以讓網頁更加生動有趣，增加用戶的體驗感，是現代網頁設計中的非常重要的組成部分，值得學習和掌握。