CSS3有很多很強(qiáng)大的特性，其中之一就是噴泉效果。這種效果可以很好的展示我們網(wǎng)站的創(chuàng)意和藝術(shù)性，讓我們的頁(yè)面更有吸引力。以下是一個(gè)CSS3噴泉特效的示例：

.fountain {
position: relative;
width: 400px;
height: 400px;
margin: 50px auto;
overflow: hidden;
}
.fountain:before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 200px 100px;
border-color: transparent transparent #fff transparent;
transform: translateX(-50%);
animation: fountain 2s infinite;
}
@keyframes fountain {
0% {
transform: translate(-50%, -200px);
opacity: 1;
}
50% {
transform: translate(-50%, 200px);
opacity: 0.5;
}
100% {
transform: translate(-50%, -200px);
opacity: 1;
}
}

這段CSS代碼創(chuàng)建了一個(gè)名為fountain的class，其中包含一個(gè)偽元素:before。在這個(gè)偽元素中，我們定義了一個(gè)三角形的形狀，并通過(guò)border-width和border-color屬性進(jìn)行控制。使用transform屬性和animation屬性，我們實(shí)現(xiàn)了一個(gè)運(yùn)動(dòng)效果。

此示例僅僅是一個(gè)簡(jiǎn)單的例子，您可以根據(jù)自己的需求進(jìn)行更多的探索和擴(kuò)展。基于CSS3的噴泉效果不僅能夠展現(xiàn)您的設(shè)計(jì)和創(chuàng)意，也可以讓您的網(wǎng)站更加吸引人。