CSS實現跟著鼠標移動是一項非常有趣的技術，它可以使網頁中的元素更加生動有趣。那么如何實現呢？我們可以使用CSS中的transform屬性，結合JavaScript實現鼠標移動時元素的跟隨。

.demo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
document.addEventListener('mousemove', function(e) {
var x = e.clientX;
var y = e.clientY;
var demo = document.querySelector('.demo');
demo.style.transform = 'translate(' + x + 'px,' + y + 'px)';
});

以上代碼中，我們定義了一個demo類，使用position:absolute將其定位到頁面的中心位置。然后使用JavaScript監聽mousemove事件，獲取鼠標的坐標，并將demo元素的transform屬性設置為translate(x,y)，其中x和y為鼠標的坐標。

實現了CSS跟隨鼠標移動后，我們還可以結合CSS中過渡效果實現平滑的移動過程。代碼如下：

.demo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: transform 0.3s ease-out;
}
document.addEventListener('mousemove', function(e) {
var x = e.clientX;
var y = e.clientY;
var demo = document.querySelector('.demo');
demo.style.transform = 'translate(' + x + 'px,' + y + 'px)';
});

以上代碼中，我們在demo類中添加了transition屬性，設置過渡時間為0.3秒，緩動函數為ease-out。這樣，我們就可以在鼠標移動時看到demo元素平滑地跟隨鼠標移動了。

CSS實現跟隨鼠標移動對于網頁的增加交互性和生動性具有很大的作用。結合JavaScript和CSS中的過渡效果，可以實現更加驚艷的效果。趕快來嘗試一下吧！