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动画，从而让整朵花能够绽放出来。

这就是我们制作绽放花的代码，让我们一起来尝试一下吧！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！