CSS筆刷動(dòng)畫(huà)是一種通過(guò)CSS技術(shù)實(shí)現(xiàn)的動(dòng)態(tài)效果，可以讓我們的網(wǎng)頁(yè)更加生動(dòng)有趣。下面我們就來(lái)了解一下如何實(shí)現(xiàn)CSS筆刷動(dòng)畫(huà)。

.brush {
width: 200px;
height: 200px;
background-color: #f37;
position: relative;
}
.brush::before {
content: "";
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
animation: brush-move 2s linear infinite;
}
@keyframes brush-move {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}

首先我們創(chuàng)建了一個(gè)包含筆刷的容器，并將其設(shè)置為相對(duì)定位，以便于后續(xù)絕對(duì)定位的筆刷位置設(shè)置。接著我們使用偽類(lèi)選擇器::before來(lái)實(shí)現(xiàn)筆刷，同時(shí)為其設(shè)置了圓形、白色背景色等樣式，并通過(guò)絕對(duì)定位將其放置于容器的左上角。

然后我們通過(guò)CSS動(dòng)畫(huà)技術(shù)實(shí)現(xiàn)筆刷動(dòng)態(tài)移動(dòng)的效果，使用了@keyframes關(guān)鍵詞和transform屬性中的translateX()函數(shù)來(lái)控制筆刷的移動(dòng)軌跡。這里我們指定了從初始狀態(tài)開(kāi)始，向右移動(dòng)100px的終止?fàn)顟B(tài)，動(dòng)畫(huà)持續(xù)時(shí)間為2s，勻速運(yùn)動(dòng)（linear），并設(shè)置無(wú)限循環(huán)（infinite）。

最后，我們可以通過(guò)調(diào)整容器的寬高、背景色等樣式來(lái)實(shí)現(xiàn)不同的筆刷效果，例如模擬油畫(huà)、水彩畫(huà)等。除此之外，我們還可以通過(guò)調(diào)整動(dòng)畫(huà)屬性，例如animation-timing-function、animation-delay等來(lái)實(shí)現(xiàn)更加生動(dòng)的筆刷動(dòng)畫(huà)效果。