CSS慶祝生日倒計(jì)時(shí)

生日是一年一度的特殊時(shí)刻，為了慶祝這個(gè)特殊的日子，我們可以用CSS編寫(xiě)一個(gè)生日倒計(jì)時(shí)的效果。

//HTML
<div class="countdown">
<div class="number"></div>
</div>
//CSS
.countdown {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
background-color: #fff;
}
.number {
font-size: 80px;
font-weight: bold;
color: #ff0000;
animation: countdown 1s linear infinite;
}
@keyframes countdown {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
//JavaScript
//設(shè)置生日倒計(jì)時(shí)的時(shí)間
var birthday = new Date('2021-05-10');
var today = new Date();
//計(jì)算倒計(jì)時(shí)時(shí)間
var countdown = Math.floor((birthday - today) / (1000 * 60 * 60 * 24));
//更新倒計(jì)時(shí)數(shù)字
var number = document.querySelector('.number');
number.innerHTML = countdown;

在HTML中，我們創(chuàng)建了一個(gè)名為countdown的div，其中包含一個(gè)名為number的div。在CSS中，我們給countdown的div設(shè)置了背景顏色，并將其內(nèi)容居中對(duì)齊。對(duì)于number的div，我們?cè)O(shè)置字體大小、顏色和一個(gè)縮放動(dòng)畫(huà)。在JavaScript中，我們定義了一個(gè)生日的日期和今天的日期，計(jì)算倒計(jì)時(shí)，并用querySelector更新了倒計(jì)時(shí)數(shù)字。

通過(guò)這個(gè)簡(jiǎn)單的例子，我們可以使用CSS和JavaScript創(chuàng)建有趣的特效，慶祝生日和其他特殊的時(shí)刻。