CSS和JavaScript是前端網頁設計中最重要的兩種技術。它們不僅僅可以幫助網頁實現基本的布局和功能，更可以使用它們來創造各種令人驚嘆的特效。以下是CSS和JavaScript常見的前端特效：

1. 鼠標滑過效果
這種效果經常被用于圖片、導航菜單和按鈕等元素中。一般使用CSS的:hover屬性來實現。例如：

img:hover {
transform: scale(1.1); /* 圖片放大1.1倍 */
}

2. 輪播圖
輪播圖是一種在網頁中非常流行的圖片滾動效果。一般使用JavaScript來實現。例如：

var index = 0;
var timer = setInterval(function() {
index++;
if(index >3) {
index = 0;
}
$('.carousel .img').eq(index).show().siblings().hide();
}, 2000);

3. 下拉菜單
下拉菜單經常用于網頁導航和表單中。一般使用CSS的:hover和JavaScript的事件處理函數來實現。例如：

.nav-item:hover .dropdown-menu {
display: block; /* 鼠標滑過菜單項時顯示下拉菜單 */
}
$('.dropdown-menu').mouseleave(function() {
$(this).hide(); /* 鼠標離開下拉菜單時隱藏 */
});

4. 滾動監聽
滾動監聽是為了監測頁面滾動事件，然后實現相應的效果。一般使用JavaScript的scroll事件和offset函數來實現。例如：

$(window).scroll(function() {
if($(document).scrollTop() >100) {
$('.navbar').addClass('navbar-fixed-top'); /* 頁面滾動到一定位置時不再跟隨滾動 */
} else {
$('.navbar').removeClass('navbar-fixed-top');
}
});

以上是CSS和JavaScript中最常見的前端特效，它們都可以用來提升網站的用戶體驗和視覺效果。如果你了解了這些技術，你可以創造出更豐富、更多樣化的特效。