CSS可以輕松地為網站增添美觀的交互效果。今天我們介紹一種非常好看且簡單的CSS四葉草動畫效果。

.clover {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.clover .leaf {
width: 100%;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform-origin: center center;
opacity: 0;
animation: bloom 2s linear infinite;
}
.clover .leaf:nth-of-type(1) {
transform: rotate(0deg) translate(0, -100px) rotate(-45deg);
}
.clover .leaf:nth-of-type(2) {
transform: rotate(90deg) translate(0, -100px) rotate(-45deg);
}
.clover .leaf:nth-of-type(3) {
transform: rotate(180deg) translate(0, -100px) rotate(-45deg);
}
.clover .leaf:nth-of-type(4) {
transform: rotate(270deg) translate(0, -100px) rotate(-45deg);
}
@keyframes bloom {
0% {
opacity: 0;
}
50% {
opacity: 1;
transform: scale(1.2);
}
100% {
opacity: 0;
transform: scale(1.4);
}
}

首先，我們需要創建一個有四個子元素的父元素。每個子元素代表四個葉片。我們使用絕對定位來放置這些葉片，并旋轉它們以形成四葉草的形狀。

接下來，我們為每個葉片定義一個動畫效果，使其先消失然后再放大。這樣就形成了四葉草一片片綠意盎然的感覺。我們還為動畫設置了無限次數來使其不斷循環。

最后，我們將所有CSS代碼合在一起并將它們應用于HTML元素中。運行代碼后，你將會看到一個優美的CSS四葉草動畫效果。