CSS鼠標動態效果是網頁開發中常用的一種技巧，可以為網頁增加互動性和美觀度。下面將介紹幾種常見的CSS鼠標動態效果，并提供使用代碼。

1. 鼠標懸停改變背景色

.hover-effect {
background-color: #ff5733;
transition: background-color .5s ease; 
}
.hover-effect:hover {
background-color: #1ea4ce;
}

2. 鼠標懸停顯示文字

.hover-text {
position: relative;
}
.hover-text::after {
content: "Hello World!";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity .5s ease;
}
.hover-text:hover::after {
opacity: 1;
}

3. 鼠標點擊切換樣式

.click-toggle {
background-color: #ff5733;
color: #fff;
transition: background-color .5s ease;
}
.click-toggle.active {
background-color: #1ea4ce;
}

4. 鼠標懸停顯示陰影

.hover-shadow {
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
transition: box-shadow .5s ease;
}
.hover-shadow:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}

以上就是幾種常見的CSS鼠標動態效果及相關代碼，可以根據自身需求進行選擇和應用。