CSS3蒲公英飄動是CSS3動畫效果中的一種，其實現原理是通過CSS3的關鍵幀動畫來實現的。這篇文章就來介紹一下如何使用CSS3實現蒲公英飄動效果。

/* html部分 */
/* CSS部分 */
.dandelion {
width: 300px;
height: 300px;
background-image: url('dandelion.png');
background-repeat: no-repeat;
background-size: contain;
position: relative;
}
.dandelion:before,
.dandelion:after {
content: '';
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
position: absolute;
}
.dandelion:before {
top: 40px;
left: 80px;
animation: dandelion-before 2s ease-in-out infinite;
}
.dandelion:after {
top: 70px;
left: 60px;
animation: dandelion-after 2s ease-in-out infinite;
}
@keyframes dandelion-before {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes dandelion-after {
0% {
transform: rotate(0deg) translateY(-5px);
}
50% {
transform: rotate(60deg) translateY(-10px);
}
100% {
transform: rotate(0deg) translateY(-5px);
}
}

首先，在HTML中添加一個class名為dandelion的div元素，并在CSS中為它設置基本樣式，如寬高、背景圖等。接下來，在這個元素的偽元素:before和:after中分別添加兩個小球，分別表示蒲公英的種子和翅膀。然后，分別使用關鍵幀動畫設置它們的運動軌跡，使它們能夠隨機在dandelion這個div中飄動。

除了這兩個小球外，我們還可以在:before和:after中添加更多的元素，在這些元素中分別設置不同的關鍵幀動畫，從而實現更炫酷的蒲公英飄動效果。

總之，CSS3蒲公英飄動是一種非常有趣的CSS3動畫效果，你可以根據自己的創(chuàng)意和需求來自由設計和修改。希望這篇文章能夠為你的CSS3動畫設計提供一些參考和幫助。