鼠標(biāo)滾動觸發(fā)css動畫是一種常見的網(wǎng)頁設(shè)計(jì)技巧，它能為頁面帶來更生動的交互體驗(yàn)。在前端開發(fā)中，可以使用JavaScript監(jiān)聽鼠標(biāo)滾動事件，然后根據(jù)滾動位置觸發(fā)不同的動畫效果。接下來，本文將介紹如何使用css實(shí)現(xiàn)鼠標(biāo)滾動觸發(fā)動畫效果。

//html代碼
//css代碼
.box{
width: 100px;
height: 100px;
background-color: grey;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-name: move;
animation-duration: 5s;
animation-fill-mode: forwards;
visibility: hidden; 
}
@keyframes move{
from{
transform: translate(-50%, -50%);
visibility: hidden;
}
to{
transform: translate(-50%, -200%);
visibility: visible;
}
}

在上面的代碼中，我們創(chuàng)建了一個在頁面中居中并隱藏的box元素。

.box{
visibility: hidden;
}

接著，我們使用動畫效果將box元素從初始位置向上移動。

@keyframes move{
from{
transform: translate(-50%, -50%);
visibility: hidden;
}
to{
transform: translate(-50%, -200%);
visibility: visible;
}
}

其中，from表示動畫起點(diǎn)，to表示動畫終點(diǎn)。我們在from狀態(tài)下將box元素設(shè)為不可見，然后在to狀態(tài)下將其向上移動，并將其設(shè)為可見。

接下來，我們要使用JavaScript監(jiān)聽鼠標(biāo)滾動事件，并根據(jù)滾動位置觸發(fā)動畫效果。代碼如下：

const box = document.querySelector('.box');
window.addEventListener('scroll', () =>{
const scrollPos = window.scrollY + window.innerHeight;
const boxPos = box.offsetTop + box.clientHeight / 2;
if(scrollPos >= boxPos){
box.classList.add('animate__animated', 'animate__bounceInUp');
}
});

在上面的代碼中，我們使用querySelector方法獲取到box元素，并監(jiān)聽了鼠標(biāo)滾動事件。在每次鼠標(biāo)滾動時(shí)，我們計(jì)算了頁面滾動位置和box元素位置，并當(dāng)它們相同時(shí)觸發(fā)動畫效果。

最后，我們需要在HTML文件中引入animate.CSS文件來為box元素添加動畫效果。代碼如下：

通過鼠標(biāo)滾動觸發(fā)CSS動畫，可以使網(wǎng)頁更加生動有趣，增加用戶的使用體驗(yàn)，是現(xiàn)代Web設(shè)計(jì)中的重要技巧之一。