CSS 鼠標動畫效果是如何實現的呢？下面將給大家分享一些代碼片段。

/* 創建一個動態線條 */
.line {
height: 2px;
background: black;
width: 0%;
position: absolute;
bottom: 0;
transition: width 0.3s;
}
/* 鼠標移動到元素上，線條從左向右伸展 */
.element:hover .line {
width: 100%;
}
/* 構造一個向上彈的效果 */
.pop-up {
transform: translateY(0);
transition: transform 0.3s ease-out;
}
/* 鼠標移動到元素上，執行上彈效果 */
.element:hover .pop-up {
transform: translateY(-20px);
}
/* 生成一個跟隨鼠標移動的小圓點 */
#follower {
width: 20px;
height: 20px;
background: yellow;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
transition: all 0.3s;
z-index: -1;
pointer-events: none;
}
/* 將小圓點放在鼠標所在位置 */
.element:hover #follower {
top: mouseY;
left: mouseX;
background: blue;
}
/* 實現一個隨機跳躍的效果 */
.element:hover {
animation-name: moveIn;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes moveIn {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(50px, -30px);
}
100% {
transform: translate(-10px, 10px);
}
}

以上是一些常用的 CSS 鼠標動畫效果代碼，大家可以根據自己的需求進行調整和改進，達到更好的效果。