CSS3全屏二級菜單特效是一種非常流行的網頁設計風格。它具有非常獨特的視覺效果和很好的交互性能,能夠極大地提高網站的用戶體驗。
/* CSS3全屏二級菜單特效樣式 */ .menu{ width:100%; height:100%; position:fixed; top:0; left:0; z-index:100; background:rgba(0, 0, 0, 0.5); } .menu .nav{ display:block; width:100%; height:100%; position:fixed; top:0; left:0; z-index:1000; transform:scale(0); transform-origin:50% 0; transition:transform 0.35s ease; } .menu .nav.open{ transform:scale(1); } .menu .nav ul{ list-style:none; display:block; width:100%; text-align:center; padding-top:25%; } .menu .nav ul li{ display:inline-block; margin:0 2%; width:auto; } .menu .nav ul li a{ font-size:1.5em; line-height:2em; color:#fff; text-decoration:none; display:inline-block; padding:10px 20px; border-radius:10px; border:2px solid rgba(255, 255, 255, 0.2); box-shadow:0 0 5px rgba(0, 0, 0, 0.5); transition:border 0.35s ease, box-shadow 0.35s ease; } .menu .nav ul li a:hover{ border:2px solid rgba(255, 255, 255, 1); box-shadow:0 0 5px rgba(255, 255, 255, 0.5); }
以上是CSS3全屏二級菜單特效的核心樣式代碼。這些樣式規則使用了transform屬性來實現菜單顯示和隱藏的動畫效果,使得視覺效果非常流暢和自然。同時,也可以進行一些細節上的調整和優化,如字體大小、顏色、居中方式、邊框和陰影等,從而進一步提升界面的美觀性和舒適度。