CSS3動畫——綻放的花

今天我們來學習一下如何使用CSS3制作一朵綻放的花。首先需要用到transform屬性和animation屬性。

.flower {
width: 0;
height: 0;
border-radius: 20px;
border: 20px solid #008B8B;
border-right-color: transparent;
border-bottom-color: transparent;
position: relative;
transform: rotate(-45deg);
animation: flower 3s linear forwards;
}
@keyframes flower {
from {
width: 0;
height: 0;
opacity: 1;
left: 50%;
top: 50%;
}
to {
width: 200px;
height: 200px;
opacity: 0;
left: 0;
top: 0;
}
}
.flower:before {
content: "";
width: 20px;
height: 20px;
background-color: #FE9A2E;
position: absolute;
transform: rotate(45deg);
left: -20px;
top: 30px;
opacity: 0;
animation: petal 3s linear forwards;
}
.flower:after {
content: "";
width: 20px;
height: 20px;
background-color: #FE9A2E;
position: absolute;
transform: rotate(-45deg);
right: -20px;
top: 30px;
opacity: 0;
animation: petal 3s linear forwards;
}
@keyframes petal {
from {
width: 0;
height: 0;
opacity: 1;
transform: rotate(0deg);
}
to {
width: 50px;
height: 30px;
opacity: 0;
transform: rotate(360deg);
}
}

可以看到，我們用到了:before和:after來分別制作花瓣，并給它們加上了petal動畫。同時，我們給整個花加上了flower動畫，從而讓整朵花能夠綻放出來。

這就是我們制作綻放花的代碼，讓我們一起來嘗試一下吧！