CSS 二級菜單動畫可以幫助網頁設計師實現精美的菜單效果,增強網站用戶體驗。下面,我們將為大家介紹一些常用的 CSS 二級菜單動畫效果。
/* 1. 下拉菜單動畫 */
.menu {
position: relative;
display: inline-block;
}
.menu ul {
position: absolute;
top: 100%;
left: 0;
z-index: 10;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
}
.menu:hover ul {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
/* 2. 淡入淡出菜單動畫 */
.menu2 {
position: relative;
display: inline-block;
}
.menu2 ul {
position: absolute;
top: 100%;
left: 0;
z-index: 10;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.menu2:hover ul {
opacity: 1;
visibility: visible;
}
/* 3. 3D 翻轉菜單動畫 */
.menu3 {
perspective: 1000px;
position: relative;
display: inline-block;
}
.menu3 ul {
position: absolute;
top: 100%;
left: 0;
z-index: 10;
opacity: 0;
visibility: hidden;
transform: rotateX(-90deg);
transform-origin: top;
transition: all 0.3s ease;
}
.menu3:hover ul {
opacity: 1;
visibility: visible;
transform: rotateX(0deg);
}
以上是常用的三種 CSS 二級菜單動畫效果,通過運用這些動畫,可以讓網站菜單更加漂亮、時尚,并提高用戶的交互體驗。