在網(wǎng)頁(yè)設(shè)計(jì)中，添加一些特效可以讓網(wǎng)頁(yè)更加生動(dòng)有趣。今天我們來實(shí)現(xiàn)一個(gè)CSS星星閃動(dòng)的效果。

.star {
display: inline-block;
width: 0;
height: 0;
margin-right: 0.5em;
margin-bottom: 0.2em;
border-right: 0.3em solid transparent;
border-bottom: 0.7em solid #f8e825;
border-left: 0.3em solid transparent;
transform: rotate(35deg);
animation: twinkle 1s ease-in-out infinite;
}
@keyframes twinkle {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}

HTML代碼：

<div class="star"></div>

我們先用CSS畫一個(gè)星星，再使用動(dòng)畫讓它閃爍起來。我們使用偽元素:before來畫一個(gè)空星星，再使用border-bottom給星星填充顏色。在星星上使用transform: rotate(35deg)讓它傾斜。使用animation: twinkle給星星添加閃爍的動(dòng)畫，使用@keyframes定義動(dòng)畫的效果。

通過改變CSS樣式我們還可以制作出閃爍不同顏色的星星，達(dá)到更加豐富的效果。

通過這個(gè)簡(jiǎn)單的CSS星星閃動(dòng)的效果，我們可以看到CSS可以實(shí)現(xiàn)很多有趣的效果，而學(xué)習(xí)CSS制作這些特效也是前端開發(fā)的必要技能之一。