CSS3飄花效果是一種在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常使用的特效之一，可以讓網(wǎng)頁(yè)更加生動(dòng)、炫酷。通過(guò)使用pre標(biāo)簽可以方便地展示實(shí)現(xiàn)飄花效果的CSS3代碼。

/*設(shè)置花瓣飄落的動(dòng)畫(huà)*/
@-webkit-keyframes fall {
0% {
-webkit-transform: translate(0, -100px) rotate(0);
}
100% {
-webkit-transform: translate(500px, 800px) rotate(360deg);
}
}
/*設(shè)置花瓣的樣式*/
.fall {
position: absolute;
background-image: url('flower.png'); /*要飄落的花瓣圖片*/
background-size: contain;
width: 50px;
height: 50px;
-webkit-animation: fall 10s linear infinite both;
}
/*設(shè)置多個(gè)花瓣飄落*/
.fall:nth-child(1) {
-webkit-animation-delay: 0.6s;
}
.fall:nth-child(2) {
-webkit-animation-delay: 0.8s;
}
.fall:nth-child(3) {
-webkit-animation-delay: 1s;
}
.fall:nth-child(4) {
-webkit-animation-delay: 1.2s;
}
.fall:nth-child(5) {
-webkit-animation-delay: 1.4s;
}

利用上述代碼，可以實(shí)現(xiàn)在網(wǎng)頁(yè)中出現(xiàn)多個(gè)花瓣飄落的效果。通過(guò)設(shè)置不同的動(dòng)畫(huà)延遲時(shí)間和花瓣樣式，可以實(shí)現(xiàn)更加多樣化的效果。

當(dāng)然，以上代碼只是基礎(chǔ)代碼，如果想要實(shí)現(xiàn)更復(fù)雜、更有趣的飄花效果，還需要根據(jù)實(shí)際需求調(diào)整樣式和動(dòng)畫(huà)