CSS實現星星閃爍動畫

/* 定義星星背景色 */
.star {
background-color: #F5E4B5;
}
/* 定義星星大小 */
.star:before,
.star:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 1rem;
height: 1rem;
}
/* 定義星星形狀 */
.star:before {
transform: rotate(45deg);
clip-path: polygon(50% 0%, 0% 50%, 50% 100%, 100% 50%);
}
.star:after {
transform: rotate(45deg);
clip-path: polygon(50% 0%, 0% 50%, 50% 100%, 100% 50%);
}
/* 定義閃爍動畫 */
.star {
animation: twinkle 1s ease-in-out infinite;
}
@keyframes twinkle {
0% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}

上述代碼實現了一個閃動的星星動畫。

首先，我們定義了星星的背景色和大小。然后，為星星的before和after子元素定義了星星的形狀，并且使用clip-path屬性來實現星星的角度。

我們為星星元素定義了一個閃爍動畫，動畫的名稱是twinkle，時長是1秒，循環無限次。在動畫中，我們使用了opacity屬性和transform屬性控制星星的透明度和大小。

最后，將該動畫的keyframes定義在了@keyframes中，控制了星星的三個階段：初始階段，中間階段和結束階段。

以上就是使用CSS實現星星閃爍動畫的代碼。希望能對大家有所幫助。